d3js代碼在線編輯工作，但不是在HTML文件中

這裏是我的d3.js代碼d3js代碼在線編輯工作，但不是在HTML文件中

<html> 
<head> 
    <title>D3 Test</title> 

</head> 
<body> 
    <script type="text/javascript" src="d3/d3.v2.js"></script> 
    <script type="text/javascript"> 
     var w = 400, 
      h = 400, 
      padding = 31, 
      p = 10, 
      barwidth = 10; 
     var data = [{count:200,year:2008}, 
        {count:240,year:2010}, 
        {count:290,year:2009}]; 
     var bar_height = d3.scale.linear() 
         .domain([d3.max(data, function(d) { return d.count; }), 0]) // min max of count 
         .range([p, h-p]); 
     var bar_xpos = d3.scale.linear() 
         .domain([2005, d3.max(data, function(d) { return d.year; })]) // min max of year 
         .range([p,w-p]); 
     var xAxis = d3.svg.axis() 
        .scale(bar_xpos) 
        .orient("bottom") 
        .ticks(5); //Set rough # of ticks 

     var yAxis = d3.svg.axis() 
        .scale(bar_height) 
        .orient("left") 
        .ticks(5); 

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

     svg.append("g") 
      .attr("class", "axis") 
      .attr("transform", "translate(0," + (h - padding) + ")") 
      .call(xAxis); 

     svg.append("g") 
      .attr("class", "axis") 
      .attr("transform", "translate(" + padding + ",0)") 
      .call(yAxis); 

     svg.selectAll("rect") 
      .data(data) 
      .enter().append("rect") 
      .attr("x", function(d) { 
       return bar_xpos(d.year); }) 
      .attr("y", function(d) { 
       return bar_height(d.count); }) 
      .attr("width", barwidth) 
      .attr("height", function(d) {return h - bar_height(d.count) - padding; }) 
      .attr("fill", "steelblue") 
    </script> 
</body>

此代碼是在這裏工作精細http://enjalot.com/inlet/4132552/ 但是當我嘗試這在HTML文件中它不起作用。

來源

2012-11-23 iJade

附加您的SVG到身體或一個div。

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

它工作正常

來源

2012-11-23 13:16:44 selvagsz

這或添加腳本元素上方空元素從而選擇相匹配的東西。 –

th @ks @Selva dat做到了 – iJade

d3js代碼在線編輯工作，但不是在HTML文件中

回答

相關問題