當數組長度發生變化時D3會自動更新

我從Scott Murray的Interactive Data Visualization獲得簡單的代碼，並做了細微的更改。我改變的是5的初始數據長度不同於dataset1的長度25在click函數中。當數組長度發生變化時D3會自動更新

但是，每次點擊並更新時，它都會生成隨機的新數字，但長度只顯示5個小節。

這是什麼原因？我怎麼修改來改變它？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <script type="text/javascript" src="../d3/d3.v3.js"></script> 
    <title>D3 index01 </title> 
    <style type="text/css"> 
    div.bar{ 
     display: inline-block; 
     width: 20px; 
     height: 75px; 
     background-color: teal; 
     margin-right: 2px; 

    } 
    </style> 
</head> 
    <body> 
    <p> click it </p> 

     <script type = "text/javascript"> 
     var w=600; 
     var h = 250; 
     var dataset = [5,10,13,14,15]; 

     var xScale = d3.scale.ordinal() 
      .domain(d3.range(dataset.length)).rangeRoundBands([0,w],0.05); 

     var yScale = d3.scale.linear() 
      .domain([0,d3.max(dataset)]).range([0,h]); 

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

     svg.selectAll("rect") 
       .data(dataset) 
       .enter() 
       .append("rect") 
       .attr("x", function(d,i){ 
        return xScale(i); 
       }) 
       .attr("y",function(d){return (h-yScale(d));}) 
       .attr("width",xScale.rangeBand()) 
       .attr("height",function(d){return yScale(d);}); 

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

     d3.select("p") 
      .on("click",function(){ 
       var dataset1 = []; 
       for(var i=0; i<25; i++){ 
        var newNumber = Math.floor(Math.random()*25); 
        dataset1.push(newNumber); 
       } 

       svg.selectAll("rect").data(dataset1) 
       .transition() 
       .delay(function(d,i){ 
        return i*100; 
       }) 
       .duration(500) 
       .attr("x",function(d,i){ 
        return xScale(i); 
       }) 
       .attr("y",function(d){ 
        return h-yScale(d); 
       }) 
       .attr("x", function(d,i){ 
        return xScale(i); 
       }) 
       .attr("height",function(d){ 
        return yScale(d); 
       }) 
       .attr("fill",function(d){ 
        return "rgb(0,0, " + (d*10) + ")"; 
       }); 

       svg.selectAll("text").data(dataset1). 
       text(function(d) { 
        return d; 
       }) 
        .attr("x", function(d, i) { 
          return xScale(i) + xScale.rangeBand()/2; 
       }) 
        .attr("y", function(d) { 
        return h - yScale(d) + 14; 
       }); 
      }); 
     </script> 
    </body> 
</html>

來源

2013-12-21 user3125873

啊，你根據原始數據集創建'rect'對象。因此，只有5個更新 – bnjmn

當你svg.selectAll（「rect」）.data（dataset1）'只有5個'rects'被選中。你明白我在說什麼了嗎？ – bnjmn

的問題，在我看來，就是當你用這個說法

svg.selectAll("rect").data(dataset1)

的selectAll只選擇已創建基於原來的5個rect S上的新號碼更新rect小號在dataset

var dataset = [5,10,13,14,15];

您既可以從一開始就創建它們都與一個同樣大小的開始dataset或在此時追加新的rect svgs。

因爲你正在做那裏dataset被限定在原rect的I認爲這是很有道理的，只是與所有25開始你可以寫一個函數來自動生成這一點，並把它轉變：

var dataset = []; 
var numBars = 25; // This is the number of bars you want 
var maxHeight = 25; // Seems like this is independent and needed as a ceiling 
for(var i =0;i < N;i++){ 
    var newNumber = Math.floor(Math.random()* maxHeight); 
    dataset.push(newNumber); 
}

您也可以在onclick函數中用numBars代替25。

來源

2013-12-21 19:04:30 bnjmn

當數組長度發生變化時D3會自動更新

回答

相關問題