D3使用jquery $（this）選擇器更新條形圖

我使用D3創建條形圖，並使用jquery來選擇條形圖。我遇到了一個問題，我不明白我在哪裏使用$（this）選擇了一個條形（矩形），而console.log（）語句似乎證實了這一點。但是，我有問題獲得某些功能（例如轉換，樣式）才能正常工作 - 錯誤消息表示它們不是函數。

我已經構建了我在下面遇到的問題的一個小例子。而不是條形圖，只有兩個矩形。我成功改變了寬度，但不能使用轉換來平滑此更改，也無法使用$（this）.style更改填充顏色。

感謝您的幫助！這是我的代碼。

P.S.這是我的第一個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

問：爲什麼你有'd3js'因爲如果你的代碼不使用D3標籤？順便說一句，你得到這個錯誤，因爲'transition（）'是一個D3函數，而不是一個jQuery之一。 –

d3 !== jquery，你不能叫上jquery選擇的d3選擇方法。注意，方法名稱有一些重疊（例如它們都有一個attr方法），但它們仍然不相同。

的簡單的解決你的煩惱是使用d3過渡做：

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

但這聽起來像你需要閱讀高達更好地瞭解的用例這兩個庫。在我看來，當編碼爲d3時，甚至不加載jquery。你不需要那個柺杖，而是用d3的方式來代替，從長遠來看，你不會感到困惑。

來源

2016-09-27 16:28:19 Mark

謝謝！快速提問：我的印象是，jquery允許你通過更好的選擇器實現更高效的代碼。我主要是使用jQuery作爲編寫較短代碼的方式，與D3相比，DOM代碼遍歷DOM的時間更少。你只是說使用D3代碼可以達到同樣的效率？ –

@ RyanBaxter-King，爲了回答你的具體問題，d3和jquery都在內部使用了相同的內置選擇器方法，那裏可能幾乎沒有性能差異。 **但是**你問的是錯誤的問題。你應該專注於編寫乾淨的代碼，這些代碼很容易閱讀，理解和重構。如果你想建立一個基於d3的可視化，你需要d3。恕我直言，在頂部混合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）選擇器更新條形圖

回答

相關問題