Question

非常感谢任何见解。我把自己打结成了一个相对d3的新人。

我有一张美国地图，我在其上放置标记，在csv文件中显示三组不同的数据。我有三个可以检查的单选按钮，一个＆＃34;显示＆＃34;单击时运行render（）的按钮。我已尝试对其进行设置，以便数据通过输入，更新和退出自动更新，但它无法正常工作。它似乎留下以前的数据，或者在某些序列中，组合或减去数据。我完全迷茫了自己。我感谢您的帮助。这是代码。如果有任何我可以添加的内容请告诉我。

var heights = d3.select("#heights");
var lengths = d3.select("#lengths");
var volumes = d3.select("#volumes");
var show = d3.select('#show');
var dataset;



heights.on('click', function(){
  dataset = "./public/assets/data/us_heights_test.csv";
});
lengths.on('click', function(){
  dataset = "./public/assets/data/us_lengths_test.csv";
});
volumes.on('click', function(){
  dataset = "./public/assets/data/us_volumes_test.csv";
});

show.on('click', function(){
  render();
});

var render = function(){

  d3.csv(dataset, function(error, latlon){ 

      latlon.forEach(function(d) {
        d.Lat = +d.Lat;
        d.Long = +d.Long;
      });

    var circles = landmarks.selectAll("circle")
      .data(latlon);

      circles
        .data(latlon)
        .enter()
        .append("circle")
        .attr({
          'fill': '#F00',
          'r': 3,
          'class': 'dot'
        })
        .each(function(d) {
          var sel = d3.select(this);
          var xy = projection([d.Long, d.Lat]);
            if(typeof xy[0]==='undefined') {
              console.log("undefined");
            } else {
            sel.attr("cx", xy[0]);
            sel.attr("cy", xy[1]);
          }
        })
        .style({
          'opacity': 0.5
        })
        .on("mouseover", details);

     circles
       .exit()
       .remove();
  });
};

D3 .exit（）表现不尽如人意

0 个答案: