D3의 현재 값을 기반으로 html 속성 변경

Question

나는 아주 간단하게하려고 노력하고있는 것처럼 느껴진다. 그러나 나는 그 방법을 알 수없는 것처럼 느껴진다. 여러 개의 막대 그래프가 표시된 페이지가 있으며 특정 막대가 나타나고 사라지는 단추를 작성하려고합니다. 막대에는 레이블이 있으며 버튼을 토글 할 때 막대의 절반이 사라지고 나머지 막대의 크기가 두 배로 늘어나고 막대의 레이블이 조금 아래로 이동하기를 원합니다.

저는 그래프를 그릴 때 D3.js를 사용하고 있으며,이 작은 라벨을 제외한 거의 모든 것이 작동합니다. 내가하려고하는 모든 것은 "y"속성을 약 15 픽셀 씩 증가 시키지만 변경하기 전에이 값을 요청할 수있는 방법을 찾지 못하는 것 같습니다!

처음에 나는

d3.selectAll(".bar-value-label").attr("y", function(d,i){ return d + 15;}) 

작동합니다 생각했다. 그러나이 "d"가 기록한 것을 기록 할 때이 요소를 만들 때 처음에 사용 된 데이터 객체에 대한 참조로 밝혀졌습니다.

그래서 기본적으로 현재 값을 가져 오거나 줄이는 방법을 찾으려고합니다. D3에서이 작업을 수행 할 수있는 좋은 방법이 있습니까?

감사합니다, 리누스

편집 : 좋아, 그래서 작동하는 방법을 발견했습니다. 대답은 여전히 ​​매우 환영합니다 :)

  var resp_labels = d3.selectAll(".bar-value-label-resp")[0]; 
      resp_labels.forEach(function(d,i){ 
       var old_y = parseFloat(d.getAttribute("y")); 
       d3.select(d).transition().attr("y", function(i){ return old_y - barheight/4 ;}); 
      }); 

Answer 1

나는 그것이 작동하는지 확인하는 기회가 없었어요 그래서 나는이 최고의/가장 효율적인 방법은 매우 희박 해요,하지만 난이 있다고 생각 솔루션의 약간 단순화 된 버전 :

var resp_label = d3.select(".bar-value-label-resp"); 
var old_y = +resp_label.attr("y"); 
resp_label.transition().attr("y", old_y - barheight/4);