D3 jquery $ (this) 선택기를 사용하여 barchart 업데이트

D3을 사용하여 barchart를 만들고 jquery를 사용하여 막대를 선택하고 있습니다. 나는 $ (this)와 console.log() 문을 사용하여 막대 (직사각형)를 선택했다고 생각하는 부분을 확인하지 못하는 문제가 발생했습니다. 그러나 특정 기능 (예 : 전환, 스타일)이 작동하는 데 문제가 있습니다. 오류 메시지는 기능이 아니라고 말합니다.

나는 아래에서 겪고있는 문제의 작은 예를 만들었습니다. barchart 대신 두 개의 직사각형 만 있습니다. 너비를 성공적으로 변경했지만 전환을 사용하여이 변경 사항을 부드럽게 처리 할 수 없으며 $ (this) .style을 사용하여 채우기 색상을 변경할 수도 없습니다.

도움 주셔서 감사합니다. 여기 내 코드가있다.

P. 이것은 내 첫 번째 StackOverflow 질문이므로이 질문을 다르게 받아야했는지 및/또는 내가 따르지 않은 규칙이 있는지 알려주십시오. 나는이 문제와 관련하여 며칠 동안 상당히 철저한 검색을 수행했으며 실제로 벽에 부딪쳤다. 다시 한 번 감사드립니다!

<body> 
    <svg width="1000" height="1000" id="this_svg"> 
     <rect x="0" y="0" width="100" height="100" fill="blue" data-color="red"> </rect> 
     <rect x="0" y="100" width="100" height="100" fill="green" data-color="purple"></rect> 
    </svg> 

    <script> 
     $ (document).ready(function() { 
      $svg = $("#this_svg") 
      rcts = $svg.find("rect") 
      // This Works Fine 
      rcts.each(function() { 
       $(this).attr("width", "500") 
      }); 
      // This breaks (see error message): 
      // Uncaught TypeError: $(...).transition is not a function 
      rcts.each(function() { 
       $(this).transition().duration(500).attr("width", "500") 
      }); 
      //... and if this hadn't already broken, this next part would 
      // break instead (see error message): 
      // Uncaught TypError: $(...).style is not a function 
      rcts.each(
       $(this).style("fill", function() { 
        return $(this).attr("data-color") 
      })); 
     }); 
    </script> 
</body>

출처

2016-09-27 Ryan Baxter-King

질문 : 왜 당신은 당신의 코드가 D3를 사용하지 않는 경우 태그로'd3js'을해야합니까? Btw,'transition()'이 jQuery가 아닌 D3 함수이기 때문에이 오류가 발생합니다. –

d3 !== jquery, 당신은 jquery 선택기에 d3 선택기의 메소드를 호출 할 수 없습니다. 참고, 메서드 이름에 몇 가지 겹침이 있습니다 (예 : 둘 다 attr 메서드가 있음). 그러나 여전히 동일하지는 않습니다. 당신의 문제에

쉬운 수정 마십시오 d3 전환을 사용하는 것입니다

d3.select(this).transition().duration(500).attr("width", "500");

하지만 당신이 두 라이브러리에 대한 사용 사례의 더 나은 이해를 얻기 위해 읽을 필요가 것처럼 들린다. 내 마음 속에서 d3까지 코딩 할 때 jquery을로드하지 마십시오. jquery 버팀목이 필요하지 않으며, 대신 d3 길을 택하면 더 이상 혼란에 빠지게됩니다.

출처

2016-09-27 16:28:19 Mark

감사합니다 !! 빠른 질문 : 내 생각에 jquery를 사용하면 더 나은 선택자를 통해보다 효율적인 코드를 구현할 수있었습니다. 나는 주로 D3에 비해 DOM을 탐색하는 데 더 짧은 시간이 소요되는 짧은 코드를 작성하는 방법으로 jquery를 사용했습니다. 코드가 D3만으로도 효율적이라고 말할 수 있습니까? –

@ RyanBaxter-King, 특정 질문에 답하기 위해 d3과 jquery는 둘 다 동일한 기본 제공 선택기 메서드를 사용합니다. 성능 차이는 거의 없습니다. **하지만 ** 잘못된 질문을하고 있습니다. 읽고 이해하기 쉽고 리팩토링하기 쉬운 깨끗한 코드 작성에 중점을 두어야합니다. 'd3' 기반 시각화를 만들고 싶다면 d3가 필요합니다. IMHO, 맨 위에 jquery를 섞으면 코드 유지 관리가 쉽지 않습니다. – Mark

D3을 사용하여 막 대형 차트를 만든 경우 동일한 D3을 사용하여 요소를 선택해야합니다. jQuery로 이러한 요소를 선택하는 것은 거의 의미가 없습니다.

transition()도 style도 jQuery 함수가 아니기 때문에 코드가 작동하지 않습니다. 말했다되고, 당신은 당신의 요소를 조작하는 D3를 사용한다 :

var rects = d3.selectAll("rect"); 
 
rects.transition().duration(1000).attr("width", 500).attr("fill", function(){ 
 
return d3.select(this).attr("data-color"); 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg width="1000" height="1000" id="this_svg"> 
 
     <rect x="0" y="0" width="100" height="100" fill="blue" data-color="red"> </rect> 
 
     <rect x="0" y="100" width="100" height="100" fill="green" data-color="purple"></rect> 
 
    </svg>

출처

2016-09-27 16:29:03

D3 jquery $ (this) 선택기를 사용하여 barchart 업데이트

답변

관련 문제