1

我正在关注这个缩放示例。就我而言，我不知道如何为我的 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);
});

并在“缩放”功能中像这样重绘

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");

当然，这种重绘是行不通的。

那么我该如何重绘这个呢？

4

1 回答 1

3

在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); });

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

于 2013-08-09T03:20:09.577 回答