d3 直线和圆数据

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

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

完整示例here。

d3 直线和圆数据

d3 lines and circles data

javascript

charts

d3.js