d3数据继承,同时追加

时间:2017-03-05 19:51:07

标签: javascript jquery d3.js

我有两个div:一个用于固定图表(#pinned_graphs),另一个用于其他图表(#vis)。

我成功地将图表固定并移动到#pinned_graphs,但是当我尝试取消固定以将该图表移回#vis div时,在追加图表时会继承#vis的所有数据。

下面是我的代码段: 非常感谢任何帮助,我已经做了很多谷歌搜索,我认为问题是选择期间的数据继承。

function pin_clicked(d){

 var pinned_icon = d3.select(this).text();
 var div_pinned=d3.select(this.parentNode.parentNode.parentNode);

 if (pinned_icon== '\uf0d3'){ // if icon is pin then pin

   div_pinned.style("position","relative").style("left",0).style("top",0);
   // to move the selected div to the pinned area
   d3.select('#pinned_graphs').append(function(){return div_pinned.node();});
   d3.select(this).text(function(d) { return '\uf118'; });
  }

  else if(pinned_icon== '\uf118'){ //else if icon is unpin, move it back 
    d3.select(this.parentNode.parentNode.parentNode.parentNode).datum([])
    var div_pinned1=d3.select(this.parentNode.parentNode.parentNode);
    div_pinned1.style("position","absolute")
    var x = div_pinned1.data()[0]
    console.log(div_pinned1)
    d3.select('#vis').append(function(){return div_pinned1.node();}) 
     // if I comment this append line, the data with div_pinned1 is only one object which is what i need
    d3.select(this).text(function(d) { return '\uf0d3'; })

 }

 // re-arrange the charts inside the vis div
    $('#vis').isotope('reloadItems'); 
    return $("#vis").isotope({
      sortBy: 'name'
    });


}

1 个答案:

答案 0 :(得分:0)

我找到了解决问题的方法,但我不知道它为什么会起作用。任何解释都会很棒

I removed:d3.select(this.parentNode.parentNode.parentNode.parentNode).datum([])

and added .datum(x) to the append -> d3.select('#vis').datum(x).append(function(){return div_pinned1.node();})