Почему мой выбор 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

Если вы говорите, что код, как показано на Ваши вопросы работы с <button> элемента до <script> элемента, это потому, что <script> элементы выполнены как браузер встречает их, сверху-вниз при разборе страница. Это означает, что любой используемый вами JavaScript может ссылаться только на элементы, которые выше в источнике страницы, потому что браузер еще не знает о более поздних элементах.

Если у вас нет кода, у вас есть код внутри функций, которые не вызываются до завершения DOM, например, если вы назначаете обработчик событий DOM ready или onload или делегированный обработчик кликов или что-то в этом роде.

источник

2013-10-12 11:02:23 nnnnnn

Почему мой выбор D3 должен появиться перед кодом D3?

ответ

Смежные вопросы