Question

我创建了d3 PCP图表，这是我的代码：

 var m = [60, 10, 10, 60],
      w = 1000 - m[1] - m[3],
      h = 270 - m[0] - m[2];

 var  x=d3.scaleOrdinal()
    .range([0, w]),
      y = {},
      dragging = {};

    var line = d3.line(),
      background,
      foreground;

 var svg = d3.select("#test").append("svg:svg")
      .attr("width", w + m[1] + m[3])
      .attr("height", h + m[0] + m[2])
      .append("svg:g")
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");   

    //let dimensions
    // Extract the list of dimensions and create a scale for each.
     x.domain(this.dimensions = d3.keys(data[0]).filter(function(d) {
      if (d === "name") return false;
      if (d === "Plant" || d === "Chemical" || d === "Pathway" || d === "Gene" || d === "Disease") {
        y[d] = d3.scaleOrdinal()
          .domain(data.map(function(p) {
            return p[d];
          }))
          .range([h, 0]);
      } else {
       y[d] = d3.scaleLinear().domain([0, d3.max(data.map(function(p) { return p[d]; }))]).range([h, 0]);
      }
      return true;
    }));

    //alert(this.dimensions)

    // Add grey background lines for context.  
    background = svg.append("svg:g")
      .attr("class", "background")
      .selectAll("path")
      .data(data)
      .enter().append("svg:path")
       .style('fill', 'none')
       .attr("d", path.bind(this));


    // Add blue foreground lines for focus.
    foreground = svg.append("svg:g")
      .attr("class", "foreground")
      .selectAll("path")
      .data(data)
      .enter().append("svg:path")
       .style('fill', 'none')
       .style('stroke', 'steelblue')
      .attr("d", path.bind(this));

    // Add a group element for each dimension.
    let g = svg.selectAll(".dimension")
      .data(this.dimensions)
   .enter().append("svg:g")
      .attr("class", "dimension")
      .attr("transform", function(d) {
        return "translate(" + x(d) + ")";
      })


    // Add an axis and title.
    g.append("svg:g")
      .attr("class", "axis")
      .each(function(d) {
        d3.select(this).call(d3.axisLeft(y[d]));
      })
      .append("svg:text")
      .attr("text-anchor", "middle")
      .attr("y", -50)
      .attr("x",-10)
      .style("fill", "black")
       .text(function(d) {return d });   


    var firstAxis = d3.selectAll('g.dimension g.axis');

    firstAxis
      .append("svg:image")
      .attr('x',-20)
      .attr('y',-60)
      .attr('width', 40)
      .attr('height', 60)
      .attr("xlink:href", function(s) {
        return "images/" + s+'.png';
      });

    function position(d) {
      var v = dragging[d];
      return v == null ? x(d) : v;
    }

    function transition(g) {
      return g.transition().duration(500);
    }

    // Returns the path for a given data point.
    function path(d) {
           return line(this.dimensions.map(function(p) {
          return [position(p), y[p](d[p])];
      }));

    }

我的网页上有一个简单的输入，显示一些输入下拉列表，根据我们每次将新数据集传递给脚本时所选的值。每次用户更改表单上的值时，都会发送新数据集到我的剧本。我正在努力弄清楚如何使用我尝试使用exit和remove函数的新数据集更新（刷新）图表，但没有取得多大成功。

svg.exit().remove();

Answer 1

退出方法：

返回退出选择：选择中的现有DOM元素没有找到新的数据。（退出选择为空 selection.data 未返回选择。）（API documentation）。

虽然您已为选择g，foreground和background指定了数据，但您尚未为选择svg指定任何数据，因此退出选择将为是空的。因此，.remove（）无法删除任何内容。

要使用退出选择，请注意退出选择不会删除选择中的元素。它是选择中不再具有相应绑定数据的元素子集的选择。

如果选择包含10个DOM元素，并且选择的数据数组设置为包含9个元素的数组，则退出选择将包含一个元素：多余元素。

我们可以使用.exit（）。remove（）删除此子集。退出是我们不再需要的元素，remove（）将它们删除。退出并不会删除元素，因为我们可能仍希望对它们执行某些操作，例如转换它们或隐藏它们等。

如上面引用中所述，要填充退出选择，您必须使用selection.data（）：

var selection = svg.selectAll("path")
  .data(data);

现在我们可以访问输入选择，退出选择和更新选择。

除非指定一个键，否则只有一个输入或退出选项可以包含元素：如果我们需要更多元素，我们不需要退出任何元素，如果我们有多余元素，我们就不需要任何元素新的。

要删除多余的元素，我们现在可以使用：

var selection = svg.selectAll("path")
  .data(data);    

selection.exit().remove();

鉴于您要为其他选项指定数据，例如foreground，background和g，这些是您应该使用.exit（）的选项，作为完成输入/更新/退出周期。请记住，在d3v4中，您需要合并更新并输入选择，以便对选择中的预先存在的元素和新元素执行操作。

然而，如果你只是想摆脱svg并开始新鲜（这就是你想要做的 - 当你试图删除svg时）你可以简单地删除svg：

d3.select("#test")
  .select("svg")
  .remove();

然而，这不允许您在图表之间很好地转换或利用输入/更新/退出周期。

为什么要注意使用svg.remove（）？因为选择svg包含g元素：

 var svg = d3.select("#test") // returns a selection with #test
      .append("svg:svg")      // returns a selection with the new svg
      .attr(...)              // returns the selection with the newly created svg again
      .append("svg:g")        // returns a selection with the new g
      .attr(...);             // returns the selection with the newly created g again

svg因此是g的选择，删除它不会删除svg元素。实际上在svg.remove()之后运行上面的代码块会向DOM添加一个新的svg元素，而不会删除旧的。

d3.js：使用新数据集刷新图表

1 个答案: