javascript - d3线和圆数据

我正在尝试绘制一组直线和圆点，但无法弄清楚如何使圆工作。

线函数需要一个点数组，但是对于圆来说，它只需要每个点的x / y。

如何为每个x / y点附加一个圆（与该线相同的组）？

// Data join
var join = svg.selectAll("g")
    .data(lineData)

// Enter
var group = join.enter()
    .append("g");

group.append("path")
    .attr('stroke', 'blue')
    .attr('stroke-width', 2)
    .attr('fill', 'none');

group.append('circle')
    .attr("r", 10)
    .attr('fill', 'blue');

// Update
join.select("path")
    .attr('d', line);

join.select("circle")
    .attr("cx", function(d) { return x(d.x); })
    .attr("cy", function(d) { return y(d.y); });

完整代码在这里：http://jsfiddle.net/dxxddvL4/1/

最佳答案

您需要使用的基本模式是nested selections-每行有多个圆圈。分别进行直线和圆形比较容易，首先将直线和g元素：

var join = svg.selectAll("g")
        .data(lineData);

    // Enter
    join.enter()
        .append("g")
        .append("path")
        .attr('stroke', 'blue')
        .attr('stroke-width', 2)
        .attr('fill', 'none');

    // Update
    join.select("path")
        .attr('d', line);

    join.exit().remove();

该代码与您的代码基本相同，除了附加的g元素没有保存在单独的选择中，并且退出选择是通过删除这些元素来处理的。现在，圆圈沿着相同的方向：

var circles = join.selectAll("circle")
        .data(function(d) { return d; });

    circles.enter()
        .append('circle')
        .attr("r", 10)
        .attr('fill', 'blue');

    circles.attr("cx", function(d) { return x(d.x); })
        .attr("cy", function(d) { return y(d.y); });

    circles.exit().remove();

这里的第一行是嵌套选择-对于表示该行的数组中的每个元素，我们都需要一个圆。请注意，这是对g元素的更新选择进行的操作。之所以可以，是因为在附加g元素时，enter选择中的元素会合并到update选择中。也就是说，即使我们仅处理更新选择，此操作中也包含任何新添加的元素。

之后，我们照常处理选择。输入选择附加了元素，更新选择设置了坐标，出口选择删除了元素。所有的魔术都发生在第一行，我们告诉D3，对于顶层的每个g元素，将行中的每个点绑定到下方的任何圆圈。

完整的示例here。

关于javascript - d3线和圆数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28616948/