Question

我正在努力扩展找到here的示例。我有一个数据源，可以在不同的时间段内提取数据。数据符合预期，并且可以单独绘制。我添加了一个计时器来遍历结果集。以下代码位于原始示例中。有三个呼叫点，传单，arcLines（下面只显示传单）

svg.append("g").attr("class","flyers")
 .selectAll("path").data(links)
 .enter().append("path")
 .attr("class","flyer")
 .attr("d", function(d) { return swoosh(flying_arc(d)) })

我将代码更改为允许更新，并且它们有点工作。删除线/点/传单，仅显示时间间隔中的数据。

var flyer_data = svg_flyers
        .selectAll("path").data(links);

    flyer_data
        .exit().remove();

    flyer_data
        .enter().append("path")
        .attr("class", "flyer")
        .attr("d", function(d) {
            return swoosh(flying_arc(d))
        });

现在，当点和线处于焦点时，数据无法正确显示。在剪切之前，仅显示正好在地平线上的数据。上述代码还有另一个副作用。绑定数据结构正确更改，但SVG获得越来越多的未显示的点/线/弧。对于不断增长的SVG定义，最后的观察特别令人困惑。几分钟后它会降低浏览器的速度。

我已经创建了一个有足够代码来证明问题的要点。可以找到要点here。

Answer 1

您与gist的链接无效。

但是，根据您的情况，您可以按类或ID选择对象（在本例中为路径）。在我提供的示例中，您可以为您的路径指定ID并引用它。

var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
             { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
             { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

var lineData2 = [ { "x": 5,   "y": 1},  { "x": 20,  "y": 20},
             { "x": 10,  "y": 40}, { "x": 40,  "y": 60},
             { "x": 5,  "y": 80},  { "x": 60, "y": 100}];

var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");

 d3.select("svg")
 .append("path")
 .attr("id", "MyUniqueId")
 .attr("d", lineFunction(lineData));

 d3.select("#MyUniqueId")
 .transition()
 .duration(5000)
 .attr("d", lineFunction(lineData2));

见js小提琴：

http://jsfiddle.net/3M54q/3/

更新D3数据不会从仿3d示例中删除旧数据

1 个答案: