2015-05-15 108 views
2

我正在使用D3,并且当我将鼠标悬停在节点上时,我想要一个文本框显示,并将所有节点属性写入它。我做了一个文本框和IM能写的属性我知道该文本框:如何打印出对象的所有属性

function onHover(){ 
    d3.selectAll("#nodeAttributes") 
      .text(function() { return (d.type); }) //random attribute i know    
      ; 
} 

这就是所谓的节点上的“鼠标悬停”。但是如果我不知道节点有什么属性呢?我如何遍历所有属性并将它们全部写入文本框。我的数据看起来与此类似:

nodes: [ 
     { 
      "type": "o", 
      "name": "fred", 
      "age": "16", 
      "class": "maths", 
. 
. 
. 
. 

     }, 

我想要的输出的文本看起来像:

type: o 
name: fred 
age: 16 
class: maths 

我不能确定如何通过选择节点的每个属性(d)

在此先感谢

+0

console.log()如何? – user2182349

+0

我知道如何编写它只是我想要的文本,所以我可以传递它不同的数据,并始终打印出这些数据。这样我不必具体编码输出它,它的变量 – thatOneGuy

+0

对不起@sgtBOSE我不明白你说什么? – thatOneGuy

回答

2

您可以用下面的代码的对象迭代:

function onHover() { 
    d3.selectAll('#nodeAttributes').html(function (d) { 
    var str = ''; 
    for (var key in d) { 
     str += key + ': ' + d[key] + '<br/>' 
    } 
    return str; 
    } 
); 
} 
+0

休息似乎没有工作,但我可以解决这个问题。所有的作品都很棒,欣赏快速反应:D谢谢 – thatOneGuy

+1

你应该用'.html'替换'.text' – jmgross