javascript - 为每第 n 个数据元素 d3.js 添加一个圆圈

Question

我正在 d3.js 中创建一个分组折线图。我想为数据添加带有工具提示的圆圈。但是，对每个点都这样做变得太拥挤了。因此，我想在线上每隔三个数据点添加一个圆圈。

我尝试使用以下代码执行此操作：

svg2.selectAll("dot")

        .data(data)
        .enter().append("circle")
        .attr("r", 10)
        .attr('fill', "red")
        .attr("cx", function (d,i) {
            if (i%3 === 0 && i>0) {
                return xAxisScale(d.date);
            }
            else {
                return null;
            }
        })
        .attr("cy", function (d,i) {
            if (i%3 === 0 && i >0 ) {

                return yAxisScale(d.count);
            }
            else {
                return null;
            }

        })

但是，由于某种原因，似乎有一个无关紧要的地方。

我不确定为什么会发生这种情况或如何摆脱这种情况。任何帮助将不胜感激！

标签： javascriptwebd3.js

Answer 1

您正在为每个数据点添加一个圆圈，仅定位每三个数据点。使用时已经添加了圆圈.attr("cx"，该enter().append()部分已经附加了圆圈。因此，当您使用 i 来定位每三个圆圈时，每隔一个圆圈都被赋予 null 作为 cx 和 cy 属性，所以这个任性的圆圈实际上是许多圆圈相互重叠。

相反，过滤您的数据数组：您有一个空选择（selectAll('dot')不应该选择任何元素，因此输入选择将为数据数组中的每个项目创建一个元素）。这样我们只会为我们想要的数据点创建圆圈：

svg2.selectAll("dot")
    .data(data.filter(function(d,i) { return i%3 == 0})
    .enter().append("circle")
    .attr("r", 10)
    .attr('fill', "red")
    .attr("cx", function (d,i) {
       return xAxisScale(d.date);
    })
    .attr("cy", function (d,i) {
        return yAxisScale(d.count);
    })

通过过滤数据，我们只选择了我们想要的圆圈。