Question

我是d3.js的新手，并试图了解如何检索已存在于html页面上的元素。

如果我尝试以下内容，当我查看控制台日志时，“d”未定义。我可以通过'this'关键字访问某些td信息，但是查看d3 API https://github.com/mbostock/d3/wiki/Selections#wiki-style，它表示如果style将值作为函数，它会传递当前的'datum'和index。

我可以很好地获得索引，但是数据总是未定义的。是否有一些明显的东西我缺少检索值，或者有错误的方法？

<table class="results">
<tr><td>13/1/0014</td><td>81</td><td>3</td><td></td></tr>
<tr><td>12/1/0014</td><td>690</td><td>47</td><td></td></tr>
<tr><td>5/1/0014</td><td>450</td><td>26</td><td></td></tr>
</table>

d3.selectAll(".results td:nth-child(4n+2)")
  .style("background-color", function(d) { 
         console.log( d );

         //change style depending on d, but d is always undefined
         //I can access the elements via this, but not d ? 

});

jsfiddle http://jsfiddle.net/a5WkH/2/

Answer 1

D3假定您使用.data()或.datum()将数据绑定到元素。如果你还没有这样做，function(d) { ... }之类的东西将无效。从技术上讲，D3会将绑定到DOM元素的数据作为.__data__属性添加到该元素中。因此，如果您真的不想使用.data()或.datum()，则可以执行以下操作。

d3.selectAll(".results").each(function() { this.__data__ = d3.select(this).text(); });

这就是我所做的here。通常最好使用.data()。

从html获取d3.js数据

1 个答案: