선택 항목에서 조작 중 재사용 값 저장

Question

// Append circle. 
foo.append("circle") 
.attr("cx", function(d, i) { return coordinate(d, i, "x"); }) 
.attr("cy", function(d, i) { return coordinate(d, i, "y"); }) 
.attr("r", 50); 

// Append text. 
foo.append("text") 
.attr("x", function(d, i) { return coordinate(d, i, "x"); }) 
.attr("y", function(d, i) { return coordinate(d, i, "y"); }) 
.text("bar") 
.attr("transform", function(d, i) { return "rotate(" + 45 + ", " + coordinate(d, i, "x") + ", " + coordinate(d, i, "y") + ")"; }); 

// Calculate coordinate function. 
function coordinate(d, i, type) { 
    ... 
    // return an x or y coordinate 
} 

좌표를 계산하는 기능이 있습니다. 몇 가지 요소를 배치하기 위해 여러 번 호출하고 있습니다. 나는 쉽게 요소를 <g>에 포함 할 수없고 그것을 번역 할 수 없다. 좌표를 한 번 가져 와서 변수에 넣은 다음 요소를 배치 할 때마다 해당 변수에 액세스하는 방법이 있습니까? 내 데이터 집합의 각 반복에서 좌표가 변경됩니다. 감사.

Answer 1

아이디어는 x와 y 좌표가 포함되도록 데이터를 수정하는 것입니다.

// after binding modify data 
 
    foo.data(function(d,i) { d.x = coordinate(d, i, "x"); 
 
          d.y = coordinate(d, i, "y"); 
 
          return d; 
 
          }); 
 

 
    // Append circle. 
 
    foo.append("circle") 
 
    .attr("cx", function(d, i) { return d.x; }) 
 
    .attr("cy", function(d, i) { return d.y; }) 
 
    .attr("r", 50); 
 

 
    // Append text. 
 
    foo.append("text") 
 
    .attr("x", function(d, i) { return d.x; }) 
 
    .attr("y", function(d, i) { return d.y; }) 
 
    .text("bar") 
 
    .attr("transform", function(d, i) { return "rotate(" + 45 + ", " + d.x + ", " + d.y + ")"; }); 
 

 
    // Calculate coordinate function. 
 
    function coordinate(d, i, type) { 
 
     ... 
 
     // return an x or y coordinate 
 
    }