Question

创建散点图，我在绘制圆圈（数据点）时遇到问题。

当附加第一组圆圈时，它会在图表上正确绘制。然而，我尝试追加的下一组因某种原因不会被抽签。怎么会这样？我第二次使用Enter / append / select错误了吗？

我已经取消注释了我加载和操作数据的部分，并使用较小的样本创建了相同的数组。可以看出，只显示了第一组圆圈，第二组圆圈没有显示。

我的圆圈部分代码粘贴在下面：

    var circle = SVGbody
            .selectAll("circle")
            .data(graphData[0])
            .enter()
                .append("circle")
                .attr("cx",function(d){return xScale(100);})
                .attr("cy",function(d){return yScale(parseFloat(d))})
                .attr("r",5);

    circle = SVGbody
            .selectAll("circle")
            .data(graphData[1])
            .enter()
                .append("circle")
                .attr("cx",function(d){return xScale(200);})
                .attr("cy",function(d){return yScale(parseFloat(d))})
                .attr("r",5);

我只是复制了那些2来试图找出问题所在。我的实际代码在下面的for循环中。当我在这个循环中运行时，它会在索引为1时绘制圆圈，在索引为3时绘制一些圆圈。

    for(var i = 0;i < graphData.length;i++){
        var circle = SVGbody
            .selectAll("circle")
            .data(graphData[i])
            .enter()
                .append("circle")
                .attr("cx",function(d){return xScale((i*100)+100);})
                .attr("cy",function(d){return yScale(parseFloat(d))})
                .attr("r",20);
        //console.log(i + "   :::::::   " + graphData[i])
    }

一些帮助会非常有用。我真的无法弄清楚我做错了什么。

Answer 1

当对现有元素集进行操作时（正如第二个{{1}}中的情况一样）.selectAll("circle")方法仅使用数组中的这些元素，这些元素在selecton中没有相应的索引.data()。要防止此行为，您必须添加一个键功能作为.selectAll()的第二个参数，如here和here所述。

此函数只需返回数组的每个元素：

.data()

在小提琴中，它看起来像这样：

function (d) {
    return d;
}

fiddle

要更改元素的填充颜色，您必须使用var circle = SVGbody .selectAll("circle") .data(graphData[0], function(d) { return d; }) // <-- this one .enter() .append("circle") .attr("cx",function(d){return xScale(100);}) .attr("cy",function(d){return yScale(parseFloat(d))}) .attr("r",5);而不是.style("fill", ...)

.attr("fill", ...)

为什么我不能在d3中多次创建一组包含数据集的圆圈？

1 个答案: