내가이 코드에 의해 <a href="http://www.jasondavies.com/animated-bezier/" rel="nofollow">this example</a>의 <code>D3.js</code> 코드를 이해하려고 노력하고 있고 혼란 스러워요 D3.js

Question

에서 할 객체 바인딩을 수행합니다

var circle = interpolation.selectAll("circle") 
    .data(Object); 
circle.enter().append("circle") 
    .attr("r", 4) 
    .attr("fill","yellow"); 
circle 
    .attr("cx", function y(d) { console.log(d.attr("class")); return d.x; }) 
    .attr("cy", function(d) { return d.y; }); 

이 코드의 두 번째 줄은 실제로 무엇을 하는가? 어떤 데이터에 바인딩됩니까?

Answer 1

위의 요소에서 바인드 된 데이터는 getLevels(d, t)으로 표시되며 여기서 d은 2 - 4의 수이고 t은 현재 시간에서 파생 된 숫자입니다.

이것은 배열 배열을 반환합니다.

var identity = function(d){ 
    return d; 
} 

var circle = interpolation.selectAll("circle") 
    .data(identity); 
circle.enter().append("circle") 
    .attr("r", 4) 
    .attr("fill","yellow"); 
circle 
    .attr("cx", function y(d) { console.log(d.attr("class")); return d.x; }) 
    .attr("cy", function(d) { return d.y; });