爲什麼我的D3選擇必須在D3代碼之前？

我花了數小時試圖弄清楚爲什麼我的代碼無法正常工作。然後我從D3代碼（在</script>和</body>之間的末尾）到頂部（在<script type="text/javascript">和<body>之間的末尾）之後隨意地移動我的按鈕代碼。它現在有效，但我不知道爲什麼。我不想再犯這個錯誤，也不想在未來混淆自己。爲什麼我的D3選擇必須在D3代碼之前？

<body> 
<button>Update</button> 

    <script type="text/javascript"> 

    var w = 500; 
    var h = 500; 
    var barPadding = 1; 

    var dataset = [ ]; 

    for (var i = 0; i < 14; i++) {var newNumber = Math.round(Math.random() * 70); 
    dataset.push(newNumber);} 


    //Create SVG element 
    var svg = d3.select("body") 
      .append("svg") 
      .attr("width", w) 
      .attr("height", h); 

    //Create Scales for Data conversion 
    var xScale = d3.scale.linear() 
        .domain([0, d3.max(dataset, function(d,i) {return d;})]) //input 
        .range([0,w]); // output 

    var yScale = d3.scale.ordinal() 
        .domain(d3.range(dataset.length)) 
        .rangeRoundBands([0, h], 0.05);  //Vertical separation + barpadding 

     svg.selectAll("rect") 
      .data(dataset) 
      .enter() 
      .append("rect") 
      .attr("x", 3) 
      .attr("y", function (d,i) {return yScale(i);}) 
      .attr("width", function(d,i) {return xScale(d);}) 
      .attr("height", yScale.rangeBand()) 
      .attr("fill", function(d) {return "rgb(" + (d * 10) + ", 0,0)";}); 

     svg.selectAll("text") 
      .data(dataset) 
      .enter() 
      .append("text") 
      .text(function(d) {return d;}) 
      .attr("x", function(d) {return xScale(d) -15;}) 
      .attr("y", function(d, i) {return yScale(i) +5 +yScale.rangeBand()/2;}) 
      .attr("fill", "white") 
      .attr("font-family", "sans-serif") 
      .attr("text-anchor", "middle"); 


      //Create Data Update and transition 
     d3.select("button") 
      .on("click", function() { 

      //New values for dataset 
     dataset = [ ]; 

      for (var i = 0; i < 14; i++) {var newNumber = Math.round(Math.random() * 70); 
       dataset.push(newNumber);} 

      //Update all rects, and color gradient 
     svg.selectAll("rect") 
      .data(dataset) 
      .transition() 
      .attr("x", 3) 
      .attr("width", function(d,i) {return xScale(d);}) 
      .attr("fill", function(d) {return "rgb(" + (d * 10) + ", 0,0)";}); 

      //Update text label and position 
     svg.selectAll("text") 
      .data(dataset) 
      .text(function(d) {return d;}) 
      .attr("x", function(d) {return xScale(d) -15;}) 
      .attr("y", function(d, i) {return yScale(i) +5 + yScale.rangeBand()/2;}); 
    }); 


    </script> 

    </body>

來源

2013-10-12 Yansee

如果你說的是，如圖中你的問題的作品，用<script>元素之前的<button>元素的代碼，這是因爲<script>元素被執行爲瀏覽器遇到他們，頂部至底部在解析這一頁。這意味着您使用的任何JavaScript只能引用頁面源代碼中較高的元素，因爲瀏覽器還不知道後面的元素。

除非您在DOM完成後纔會調用函數中的代碼，例如，如果您分配了DOM就緒或onload事件處理程序或委派的點擊處理程序或其他東西。

來源

2013-10-12 11:02:23 nnnnnn

爲什麼我的D3選擇必須在D3代碼之前？

回答

相關問題