javascript - 将圆圈添加到直线

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)})

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