Javascript js：使用新数据集刷新图表

我已经创建了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])];
      }));

    }

我在我的网页上有一个简单的输入，其中显示了一些输入下拉列表，根据我们每次将新数据集传递给脚本时所选的值。每次用户更改表单上的值时，都会向我的脚本发送一个新数据集。我正在努力找出如何使用新的数据集更新（刷新）图表，我曾尝试使用

退出

和

删除

功能，但没有获得多少成功

svg.exit().remove();

退出方法：

返回退出选择：选择中的现有DOM元素 没有发现新的数据。（对于，退出选择为空 所选内容未返回。数据（）（）

虽然您已为选择项

g

、

前台

和

后台

指定了数据，但尚未为选择项

svg

指定任何数据，因此退出选择项将为空。因此，.remove（）无法删除任何内容

---

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

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

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

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

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

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

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

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

selection.exit().remove();

如果您正在为其他选择指定数据，例如

前台

、

后台

、和

g

，则这些是您应该在完整的输入/更新/退出循环中使用的.exit（）选项。请记住，在d3v4中，您需要合并更新并输入选择，以便对选择中的现有元素和新元素执行操作

---

但是，如果您只是想摆脱svg并重新开始（这看起来是您想要做的-当您试图删除svg时），您可以简单地删除svg：

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

但是，这不允许在图表之间进行良好的转换，也不允许利用进入/更新/退出周期

为什么要使用svg.remove（）？因为选择的

svg

包含

g

元素：

---

因此，

svg

是对

g

的选择，删除它不会删除svg元素。事实上，在

svg.remove（）

之后运行上述代码块将在不删除旧元素的情况下向DOM添加新的svg元素。

：非常感谢您的精彩解释？但我现在面临的问题是，动态添加新数据集时，我的轴和标题重叠？您可以删除旧的标题和轴（d3.selectAll（.axis））.remove（））或使用过渡（轴，而不是标题）更新它们。当前，每次运行上述脚本时都会重新绘制它们（如果每次都不完全删除svg，则为真）。

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

 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