在一行中添加圆圈

Question

我对D3完全陌生，我正在做一些基本的数据输入。我很难将圆圈添加到我拥有的数据行中，因为我无法获得。

var fruits = {"apple", "banana", "grapes"}

我希望图像显示如下内容。

问题在于，如果添加更多数据，例如var fruits = {"apple", "banana", "grapes", "mango", "orange"}，则该行应自动适应数据。

我使用id制作了这条线，这样我就可以获得x和y坐标，但是我无法将x，y的坐标均匀地放到空间圆上。

有人可以帮我解决这个问题吗？

Answer 1

这里最好的想法是使用点比例。在这种比例下，您将把数据数组作为域传递，并将其映射到给定范围。

在你的情况下，像这样：

var scale = d3.scalePoint()
    .domain(["apple", "banana", "grapes", "mango", "orange"])
    .range([minHeight, maxHeight]);

然后，您必须使用scale(d)将文本和圆圈放在y坐标中，d是匿名函数中的第一个参数，如下所示：

.attr("y", function(d){ return scale(d)})

如果您更改数据阵列，添加或删除元素，则比例会自动调整。