獲得在運行時的數據，例如來自

Question

一個文本框，我還是很新的Javascript和試圖做一些事情：

我有畫D3.js圖表​​爲我的代碼中，代碼如下所示。

我需要的東西是能夠爲了某些演示目的而改變它，以便我可以在文本框中輸入一些值，如數據集例如在文本框中？並點擊一個按鈕，然後根據這些值繪製圖表。

目前這些值是硬編碼像這樣的代碼：

<script type="text/javascript"> 

    //Width and height 
    var w = 500; 
    var h = 100; 
    var barPadding = 1; 

    var dataset = [ 5, 10, 13, 19, 21, 11, 22, 18, 15, 13, 
     11, 12, 15, 20, 18, 17, 16, 18, 23, 11 ]; 

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

    svg1.selectAll("rect") 
      .data(dataset) 
      .enter() 
      .append("rect") 
      .attr("x", function(d, i) { 
       return i * (w/dataset.length); 
      }) 
      .attr("y", function(d) { 
       return h - (d * 4); 
      }) 
      .attr("width", w/dataset.length - barPadding) 
      .attr("height", function(d) { 
       return d * 4; 
      }) 
      .attr("fill", function(d) { 
       return "rgb(0, 0, " + (d * 10) + ")"; 
      }); 

    svg1.selectAll("text") 
      .data(dataset) 
      .enter() 
      .append("text") 
      .text(function(d) { 
       return d; 
      }) 
      .attr("text-anchor", "middle") 
      .attr("x", function(d, i) { 
       return i * (w/dataset.length) + (w/dataset.length - barPadding)/2; 
      }) 
      .attr("y", function(d) { 
       return h - (d * 4) + 14; 
      }) 
      .attr("font-family", "sans-serif") 
      .attr("font-size", "11px") 
      .attr("fill", "white"); 
</script> 

Answer 1

1. 添加textarea元素和元素搭上點擊更新圖表。另外，有一個單獨的div來包含圖表可以更容易地每次刪除我們更新：

   <div id="chart"></div> 
   <textarea id="values" rows="5"></textarea> 
   <a href="#" id="gen"> 
       Generate Chart  
   </a> 
   

2. 總結以前的代碼與一個click事件&防止違約事件：

   d3.select("#gen").on("click", function(){ 
   d3.event.preventDefault(); 
   ... 
   }); 
   

3. ，刪除先前的圖表，如果它存在：在使用textarea的值

   d3.select("#chart svg").remove() 
   

4. 更新數據：

   var dataset = document.getElementById("values") 
          .value 
          .split(",") 
          .map(function(d){return +d}); 
   

顯然，這是非常脆弱和示範才真正好。用戶輸入沒有被清理，驗證等，但是如果你只是想測試幾個不同的數據集的表示，應該足夠好。

JS提琴：http://jsfiddle.net/qfS62/