Просто используйте
ою пузырьковую диаграмму. График выглядит именно так, как я хотел бы. Единственная проблема, с которой я столкнулся, - это отображение текста в середине каждого пузыря.
Текст не появляется вообще, и я попробовал несколько вариантов, чтобы получить его там. Когда я осматриваю страницу, внутри каждого круга есть текстовый элемент. Тем не менее, элемент не появляется на странице, хотя он вложен внутри каждого круга. Я вставляю свой код ниже. Вся помощь очень ценится.
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)
});