javascript - 用新数据更新 d3 图

Question

当我点击 map 上的县时，我正在尝试更新 d3 图表。不是更新现有图表，而是每次都创建一个新图表。关于如何纠正这个的任何想法？代码在这里:https://github.com/careyshan/d3-graphUpgade谢谢

这是我遇到困难的代码部分:

on("click", function(d,i){

              if(document.getElementById('linechart').childNodes===null){
                console.log("Working")
                dataNew = data.filter(function( obj ) {
                  return obj.County == d.properties.NAME_TAG;
                    console.log(data);
                });

                dataNew.sort(function(a,b){
                // Turn your strings into dates, and then subtract them
                // to get a value that is either negative, positive, or zero.
                return b.date - a.date;
                });
                for (var i=1; i<dataNew.length;i++){
                dataSel.push(dataNew[i]);
                }
          }else if(document.getElementById('linechart').childNodes!=null){
                //console.log("check")
                dataNew = data.filter(function( obj ) {
                  return obj.County == d.properties.NAME_TAG;
                });

                dataNew.sort(function(a,b){
                // Turn your strings into dates, and then subtract them
                // to get a value that is either negative, positive, or zero.
                return b.date - a.date;
                });
                for (var i=1; i<dataNew.length;i++){
                dataSel.push(dataNew[i]);
                }
              }
              linechart(dataNew);
              console.log(dataNew);
          });

Answer 1

每次都会创建一个新图表，因为在每次调用函数 linechart() 时，您都会将一个新图表(一个 svg 元素)附加到页面主体。

这是您的代码片段，每次都会附加一个新图表。

  // append the svg obgect to the body of the page
  // appends a 'group' element to 'svg'
  // moves the 'group' element to the top left margin
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("id","linechart")
      .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

如果您想更新同一个图表，只需修改您的 linechart() 函数以引用同一个 svg 元素。您可以通过为 svg 元素声明一个全局变量并在您的 linechart() 方法中使用它来实现这一点，如下所示:

  // If graph is not there, create it
  if(!svg) {
      // append the svg object to the body of the page
      //appends a 'group' element to 'svg'
      // moves the 'group' element to the top left margin
      svg= d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("id","linechart")
          .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");
  }

注意:将 svg 声明为全局变量(可以在脚本标签的开头):

var svg;