d3.js - 从html获取d3.js数据

Question

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

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

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

<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() 将数据绑定(bind)到元素。如果您还没有这样做，像 function(d) { ... } 这样的东西将不起作用。从技术上讲，D3 将绑定(bind)到 DOM 元素的数据作为 .__data__ 属性添加到该元素。因此，如果您确实不想使用 .data() 或 .datum()，您可以这样做。

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

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