Question

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

线函数需要一个点数组，但对于圆，它只需要每个点的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元素时，enter选择中的元素将合并到更新选择中。也就是说，即使我们只处理更新选择，任何新附加的元素都包含在此中。

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

完整示例here。

d3行和圆圈数据

1 个答案: