Question

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

我有一个看起来像这样的数据表（它比图片长得多）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

我认为问题与您在drawGraphic（）函数中使用enter（）选项有关。

初始渲染图形的那一刻，您将数据绑定到单个节点。

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

我假设你试图通过“clearGraphic”函数解除绑定数据。但是，您所做的只是将半径减小到0.节点仍然存在，数据仍然绑定到它们。

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

这是理解选择的好资源 http://bost.ocks.org/mike/selection/

Answer 2

你的数据绑定没有密钥 - .data（display_data）最好用.data（displayData，function（d）{d.someIdOrOther;}） - 其中someIdOrOther是一个为每个数据保存唯一键的属性在您的数据集中

否则，当您按照FilterRomeo（）之后的方式重新附加数据时，它会将新数据附加到它遇到的第一个'n'（其中n是过滤数据集的大小）元素，无论它们是否与Romeo相关<或者

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

2 个答案: