svg條形圖無法在plnkr上顯示

不知道這是一個plnkr問題還是我的代碼問題..雖然控制檯沒有顯示任何錯誤。svg條形圖無法在plnkr上顯示

我在寫一個小小的svg腳本，它不渲染。

var w = 300; 
var h = 100; 
var padding = 2; 

var dataset = [5, 10, 14, 20, 25]; 
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 i * (w/dataset.length); 
}) 
.attr('y', function(d) { 
    return h - (d); 
}) 
    .attr("width", w/ dataset.length - padding) 
    .attr("height", function(d) { 
    return d; 
    });

Plnkr這裏： http://plnkr.co/edit/X7KomlmOVS6C0zhNL19b

來源

2015-06-09 runtimeZero

的問題是，你正在運行的腳本加載窗口之前，你需要所有的放在一個window.load或文檔準備 – Daemedeor

ohh..how很多次我沒有這個錯誤..我通常從這很快恢復..但因爲d3對我來說是新的..我沒有想到別的..我會標記你回答正確..但它是一個評論.. – runtimeZero

運行它的document.ready內或等到加載窗口。 http://plnkr.co/edit/TmFWndyCgLk7GYEng7XP

<!DOCTYPE html> 
<html> 
<head> 
    <script data-require="[email protected]*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <h1>Hello Plunker!</h1> 
    </body> 

</html>

，並在JS

$(document).ready(function(){ 
    var w = 300; 
var h = 100; 
var padding = 2; 

var dataset = [5, 10, 14, 20, 25]; 
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h); 

console.log('running the plnkr'); 
svg.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 - padding) 
    .attr("height", function(d) { 
    return d * 4; 
    }); 

});

來源

2015-06-09 21:44:11 Daemedeor

svg條形圖無法在plnkr上顯示

回答

相關問題