3

我试图通过更改我提供给 d3 线函数的 lineData 数组每 5 秒后绘制一系列线：

以下是相关代码的摘录：

var svg = d3.select("body").append("svg:svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .attr("id", "svgMain")
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(drag);

var lines = svg.append("g")
      .attr("id", "lines");

function changingLines() {
      lines.selectAll("line")
        .data(lineData)
        .enter().append("line")
        .attr("x1", function(d, i) { console.log(d[0][0]); return d[0][0];})
        .attr("y1", function(d, i) { console.log(d[0][1]); return d[0][1];})
        .attr("x2", function(d, i) { return d[1][0];})
        .attr("y2", function(d, i) { return d[1][1];})
        .style("stroke", "#000")
        .style("stroke-width", "0.5")
        .attr("class", "lines");

     lines.selectAll("line").exit().remove();
     setTimeout(changingLines, 2000);
 }

我每 2 秒调用一次函数 changedLines() ，并为 lineData 数组提供不同的值。

我收到错误：未捕获的类型错误：对象没有方法“退出”

我究竟做错了什么？

4

1 回答 1

18

实际上，您有几个与此代码相关的问题。当您调用changingLines时，唯一会更新其属性的元素是enter选择中的元素（调用.enter()返回enter选择`）。

请记住，默认情况下，只有在您传递给它的数组中有新元素时，.data()才会将元素添加到选择中，例如enter

// Old data array:
var data = [1, 2, 3, 4];

// New data array:
var newData = [5, 6, 7, 8, 9];

/*
The first 4 elements in newData will replace the first 4 elements of oldData.
The number of new elements (which will be in the enter() selection) is only 1.
*/

您应该做的是保存由您的data调用计算的连接，并使用它来单独访问enter、exit和update选择。

var linesContainer = svg.append("g").attr("id", "lines");

function changingLines() {

    /* Compute the data join */
    var lines = linesContainer.selectAll("line").data(lineData);

    /* Enter */
    lines.enter().append("line");

    /* Exit */
    lines.exit().remove();

    /* Update */
    lines
         .attr("x1", function(d, i) { console.log(d[0][0]); return d[0][0];})
         .attr("y1", function(d, i) { console.log(d[0][1]); return d[0][1];})
         .attr("x2", function(d, i) { return d[1][0];})
         .attr("y2", function(d, i) { return d[1][1];})
         .style("stroke", "#000")
         .style("stroke-width", "0.5")
         .attr("class", "lines");

    setTimeout(changingLines, 2000);
}

这将在更新属性和样式之前删除旧line元素并添加新元素。line

https://github.com/mbostock/d3/wiki/Selections#wiki-enter

当您追加或插入时，输入选择会合并到更新选择中。这种方法减少了输入和更新之间的代码重复。您现在可以在输入节点后将它们应用于更新选择，而不是将运算符分别应用于输入和更新选择。在极少数情况下，您只想在更新节点上运行运算符，您可以在输入新节点之前在更新选择上运行它们。

这也应该可以解决您无法调用的问题exit()。当您lines.selectAll("line")第二次调用时，您正在创建一个新的选择，因此您将无权访问在您之前的加入时计算的选择。

阅读并重读这篇文章：http ://bost.ocks.org/mike/join/

于 2012-12-12T04:57:28.870 回答