如何在D3中重绘用圆圈填充的svg？

Question

我跟随this zoom example。就我而言，我不知道如何为我的svg重新绘制数据。

在该示例中，svg像这样初始化

chartBody.append("svg:path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);

var line = d3.svg.line()
    .x(function (d) {
    return x(d.date);
})
    .y(function (d) {
    return y(d.value);
});

在功能＆＃34;缩放＆＃34;

中重新绘制

svg.select(".line")
        .attr("class", "line")
        .attr("d", line);

在我的情况下

初始化：

userSvg.selectAll("circle")
    .data(userNodes.slice(1))
  .enter().append("svg:circle")
    .on("click", function(d){ console.log(d.ind); })
    .on("mousemove", function(d){ brushOnUser(d.ind); })
    .on("mouseout", function(){ brushOnUser(); })
    .attr("r", function(d) { return d.radius; })
    .attr("cx", function(d, i) { return userNodesScaleX(d.x); })
    .attr("cy", function(d, i) { return userNodesScaleY(d.y); })
    .style("fill", function(d, i) { return 'gray'; });

重绘：

userSvg.selectAll("circle")
    .attr("class", "circle");

当然这种重绘不起作用。

那么我该如何重绘呢？

Answer 1

在redraw函数中，您需要设置所有已更改的属性。对于一行，这基本上只是d属性，因为它包含确定如何绘制线条的所有信息。对于圆，这将是圆的位置和半径。也就是说，你的重绘功能看起来像这样。

userSvg.selectAll("circle")
    .attr("r", function(d) { return d.radius; })
    .attr("cx", function(d, i) { return userNodesScaleX(d.x); })
    .attr("cy", function(d, i) { return userNodesScaleY(d.y); });

根据您要更改的内容，您可能需要设置一组不同的属性。也就是说，如果您没有更改半径，则无需设置，但如果您要更改填充颜色，则还需要设置它。