D3可视化过滤器-错误的x和y坐标

Question

我正在为一个学校项目做一个d3可视化。但我被卡住了！一切正常..。所有的点都在正确的地方，但当我试图过滤东西时，它就会断裂。

我有一个data_sheet，它看起来像这样(比图片长得多) http://postimg.org/image/68jzjj2br/

我编写了这段代码来显示d3可视化中的所有数据。

var all_data;
    var display_data;
    var svg;
    var positief = "positief";
    var neutraal = "neutraal";
    var negatief = "negatief";

    d3.csv("data/oh_data.csv", function(dataset){
      all_data = dataset;
      display_data = all_data;
      drawGraphic();
    });

    function drawGraphic(){
      svg = d3.select("#svg-3");
      svg.selectAll("circle")
        .data(display_data)
        .enter()
        .append("circle")
        .attr("cy", function(d){
          return (d["y"]);
        })
        .attr("cx", function(d){
          return (d["x"]);
        })

        svg.selectAll("circle")
          .data(display_data)
          .transition()
          .duration(1000)
          .attr("r", 5)

        .style("fill",function(d){
          if(d["waarde"] == positief){
            return "green";
          }else if(d["waarde"] == neutraal){
            return "yellow";
          }else{
            return "red";
          }
        })

    }//Einde drawGraphic

它的工作原理和类似于这个http://postimg.org/image/ofxpeoiet/

但现在问题来了..。我想过滤，比方说，我只想看到罗密欧的圆圈，我写了这段代码

function filterRomeo(){
      clearGraphic();

      display_data = new Array();
      for(i=0; i<all_data.length; i++){
        if(all_data[i]["persoon"] == "Romeo"){
          display_data.push(all_data[i]);
        }
      }
      setTimeout("drawGraphic()",500);
    }

    function clearGraphic(){
      svg.selectAll("circle")
        .transition()
        .duration("1000")
        .attr("r", 0);

    }

发生的事情就像这个http://postimg.org/image/3vkvuuydj

它得到了罗密欧的一切，但是把它放置在错误的x和y坐标上。例如..。我在第8行找到了第一次罗密欧匹配，但将它放置在第2行的坐标处。我做错什么了？

Answer 1

您没有数据绑定的键- .data(display_data)最好作为.data(displayData，函数(D){ d.someIdOrOther；})来完成，其中someIdOrOther是一个属性，为您的数据集中的每个数据保存一个唯一的键。

否则，当您重新附加数据时，就像在FilterRomeo()之后一样，它会将新数据附加到它遇到的第一个'n‘元素(其中n是过滤数据集的大小)，不管它们是否与罗密欧相关。

Answer 2

我认为问题与以下事实有关:您在drawGraphic()函数中使用enter()选择。

当您本能地呈现图形时，就会将数据绑定到单个节点。

svg.selectAll("circle")
    .data(display_data)
    .enter()
    .append("circle")

我假设您正在尝试通过"clearGraphic“函数来解除数据绑定。然而，你所做的只是将它们的半径缩小到0。节点仍然存在，数据仍然绑定到它们。

您正在尝试通过更新display_data数组来绑定新数据--节点。但是，您只是再次运行drawGraphic函数。通过再次使用enter()选择，d3将跳过那些已经分配了数据的节点。这至少是我的理解。

以下是理解选择http://bost.ocks.org/mike/selection/的一个很好的来源