d3线和圆数据

Question

我正在尝试绘制一组线和圆点，但我不知道如何让圆工作。

line 函数需要一个点数组，但对于圆，它只需要每个点的 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/

Answer 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 元素时，输入选择中的元素会合并到更新选择中。也就是说，即使我们只处理更新选择，任何新添加的元素都会包含在其中。

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

完整示例here。