D3 .exit()表现不尽如人意

时间:2015-05-08 02:43:07

标签: javascript d3.js

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

我有一张美国地图,我在其上放置标记,在csv文件中显示三组不同的数据。我有三个可以检查的单选按钮,一个"显示"单击时运行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();
  });
};

0 个答案:

没有答案