d3.js在就緒文檔中訪問DOM

我是新來的d3，並且在我的可視化文件加載到頁面後無法從DOM訪問元素。我試圖改變一個矩形元素的屬性，但由於我不明白的原因，我只能在瀏覽器的js控制檯中執行此操作，而不是在腳本中執行html文件。d3.js在就緒文檔中訪問DOM

在讀完這裏的stackoverflow後，我發現這個link暗示我接受的答案是我的問題是把js代碼放在'我的身體的底部'，這意味着我也可以把它放在後面關閉html標籤。所以，我試過在html標籤關閉後放置腳本，甚至使用了window.onload方法，但都沒有效果。

我覺得我在基礎水平上錯過了一些東西，但我對JavaScript也比較陌生。下面是代碼：

<html> 
<head> 
    <meta charset="utf-8"> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 

    <script type="text/javascript"> 
    function draw(data) { 

      var width = 960, 
       height = 420; 

      var colorScale = d3.scale.category20c(); 

      var treemap = d3.layout.treemap() 
      .padding(4) 
      .size([width, height]) 
      .value(function(d) { return d.size; }); 

      var svg = d3.select("body") 
      .append("svg") 
       .attr("width", width) 
       .attr("height", height) 
      .append('g') 
       .attr('class','chart'); 

      var cell = svg.data([data]).selectAll("g") 
       .data(treemap.nodes) 
       .enter().append("g") 
       .attr("class", "cell") 
       .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

      cell.append("rect") 
       .attr("width", function(d) { return d.dx; }) 
       .attr("height", function(d) { return d.dy; }) 
       .style("fill", function(d) { return colorScale(d.name); }); 

      cell.append("text") 
       .attr("x", function(d) { return d.dx/2; }) 
       .attr("y", function(d) { return d.dy/2; }) 
       .attr("text-anchor", "middle") 
       .text(function(d) { return d.name+" "+d.size+"%"; }); 

     }; 
    </script> 
</head> 

<body> 
    <script type="text/javascript"> 
    d3.json("https://dl.dropboxusercontent.com/s/3csp4n28q3lcpqh/data.json", draw); 
    </script> 
</body> 
</html> 

<script> 
window.onload = function() 
{ 
d3.select("rect").style({fill: "white"}); 
} 
</script>

編輯：

我找到了答案，以我的問題。在繪圖函數結尾處包含d3.select聲明允許我更改樣式。我早些時候做過這樣的事情，但意外地將它放在函數閉包之後，所以它不包含在回調函數中。這導致我通過等待準備好的文檔來嘗試以jQuery方式修復事情。

我創建了一個codepen共享代碼和可視化，我最初工作：http://codepen.io/anon/pen/dGdagR

儘管已經找到了不同的解決我的問題，我仍然不知道爲什麼我不能經常訪問DOM一個準備好的文檔上的JavaScript。這是一些奇怪的功能與D3或另一個概念，我不正確的理解？

來源

2016-01-23 cbhyphen

嘗試在文檔準備好後更改元素。現在你正在這樣做window.onload

This問題解釋window.onload &文件之間的區別準備好了。當資產準備就緒時，會觸發window.onload。

試試這個片段。

document.addEventListener("DOMContentLoaded", function(e) { 

    d3.json("data.json", function(){ 
       draw(); 
       d3.select("rect").style({fill: "white"}); 
    }); 

});

來源

2016-01-23 02:21:23 Fawzan

感謝您的鏈接，我沒有意識到這種差異。但問題仍然存在。我試過把你推薦的代碼放在不同的地方，但無濟於事...... – cbhyphen

我已經編輯了這個功能，你現在可以檢查一下嗎？ – Fawzan

我在不同的位置嘗試了這個，但得到一個錯誤：「Uncaught TypeError：無法設置未定義的屬性」深度「。數據文件非常小，也許提供這些將有助於發現問題？ – cbhyphen

d3.js在就緒文檔中訪問DOM

回答

相關問題