d3.js v4, добавление текстовых меток к пузырькам на пузырьковой диаграмме

Question

d3.js v4, добавление текстовых меток к пузырькам на пузырьковой диаграмме

1

Я строю пузырьковую диаграмму. Диаграмма появляется именно так, как хотелось бы. Единственная проблема, с которой я столкнулся, - это получить текст, который появится в середине каждого пузыря.

Текст не отображается вообще, и я попробовал несколько вариантов его получения. Когда я проверяю страницу, внутри каждого круга есть текстовый элемент. Однако элемент не отображается на странице, хотя он вложен внутри каждого круга. Я вставляю свой код ниже. Вся помощь очень ценится.

let width = 600;
let height = 600;

let maxRadius = d3.max(data, (data) => { return data.PercentHomeless; })
let minRadius = d3.min(data, (data) => { return data.PercentHomeless; })

let svg = d3.selectAll('section')
           .append('svg')
           .attr('height', height)
           .attr('width', width)
           .append('g')
           .attr('transform', 'translate(0, 0)')

let colors = d3.scaleOrdinal(d3.schemePaired);

let simulation = d3.forceSimulation()
                  .force('x', d3.forceX(width/2).strength(0.5))
                  .force('y', d3.forceY(height/2).strength(0.5))
                  .force('collide', d3.forceCollide((data) => { return r(data.PercentHomeless) + 1.5; }))

let r = d3.scaleSqrt()
          .domain([minRadius, maxRadius])
          .range([15,75])

let circles = svg.selectAll('circles')
              .data(data)
              .enter()
              .append('circle')
              .attr('fill', (data) => { return colors(data.State); })
              .attr('r', (data) => { return r(data.PercentHomeless); })

circles.append('text')
  .attr("dy", ".3em")
  .attr("dx", -10)
  .attr("text-anchor", "middle")
  .text((data) => { return data.State; })
  .attr('color', 'black')
  .attr('font-size', 15)


let ticked = () => {
  circles
  .attr('cx', (data) => { return data.x })
  .attr('cy', (data) => { return data.y })
}

simulation.nodes(data)
  .on('tick', ticked)


});

hancho 10 сен. 2017, в 10:04

Источник

Теги:

javascript

d3.js

svg

1 ответ

Ещё вопросы

Gerardo Furtado · Accepted Answer · 2017-09-10T05-44-00.000Z

В SVGs <circle> не является элементом контейнера, то есть вы не можете добавлять тексты в круги. Тот факт, что вы видите тексты внутри элементов круга при проверке страницы, не имеет значения: они не будут отображаться.

Решение. Создайте отдельный фрагмент текста:

let texts = svg.selectAll(null)
    .data(data)
    .enter()
    .append('text')
    .text(d => d.State)
    .attr('color', 'black')
    .attr('font-size', 15)

И переместите их в ticked функцию (измените свои позиции x и y в соответствии с вашими потребностями):

let ticked = () => {
    circles.attr('cx', (data) => {
            return data.x
        })
        .attr('cy', (data) => {
            return data.y
        });

    texts.attr('x', (data) => {
            return data.x
        })
        .attr('y', (data) => {
            return data.y
        });
}

Но в этом случае метка начинается с центра узла. Обычно пользователь предпочитает, чтобы метка была написана в центре.