html에서 d3.js 데이터 가져 오기

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()을 사용하는 것이 좋습니다. .DATA에 대한