d3js：條形圖不可見，沒有錯誤顯示

我目前正在學習D3js，我正在試驗一些東西。所以我正在製作一些條形圖。一切正常，但條形圖沒有出現。d3js：條形圖不可見，沒有錯誤顯示

<!DOCTYPE HTML> 
<html> 
<head> 
<title> D3 Tutorial</title> 
<meta charset="utf-8"/> 
<script src="d3.min.js"></script> 
<script src="d3.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> 
</head> 
<body> 
<script> 
var dataArray = [20,40,50,60]; 
var width = 500; 
var height = 500; 

var widthScale = d3.scale.linear() 
        .domain([0,60]) 
        .range([0,width]); 
var colorScale = d3.scale.linear() 
        .domain([0,60]) 
        .range(["red","blue"]); 


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

var bars = canvas.selectAll("rect") 
       .data(dataArray) 
       .enter() 
        .append("rect") 
        .attr("width", widthScale) 
        .attr("heigth", 50) 
        .attr("fill", colorScale) 
        .attr("y", function(d, i){ return i*100; }); 

</script> 
</body> 
</html>

謝謝！

來源

2015-09-19 Sanchit Kapoor

似乎你缺少矩形的x元素。在條形圖。這件事;函數（d，i）{return i * 100; }）應該是高度。 – Hafiz

-2

的script.js

var svg = d3.select("svg") 
var dataArray = [ 
{data: 20}, 
{data: 40}, 
{data:50}, 
{dat:60}] 
; 
svg.selectAll("rect") 
    .data(dataArray) 
    .enter() 
    .append("rect") 
    .attr({ 
     width: function(d){return 19}, 
     height: function(d){return d.data}, 
     x: function(d, i){return 10 + i*100}, 
     y: function(d){return 100 - d.data}, 
     fill: "#3333ef" 
    });

的index.html

<svg width="100" height="100"></svg>

來源

2015-09-19 19:02:16

「D3將值作爲json格式或csv而不是簡單數組」 - 這根本不是真的！ D3數據連接在數組上運行。 – ColinE

如果你看看你的SVG，你會發現你已經產生了以下內容：

<svg width="500" height="500"> 
    <rect width="166.66666666666666" heigth="50" fill="#aa0055" y="0"></rect> 
    <rect width="333.3333333333333" heigth="50" fill="#5500aa" y="100"></rect> 
    <rect width="416.6666666666667" heigth="50" fill="#2b00d5" y="200"></rect> 
    <rect width="500" heigth="50" fill="#0000ff" y="300"></rect> 
</svg>

公告你的rect元素有heigth，而不是height！

解決這個錯字：

var bars = canvas.selectAll("rect") 
      .data(dataArray) 
      .enter() 
       .append("rect") 
       .attr("width", widthScale) 
       .attr("height", 50) 
       .attr("fill", colorScale) 
       .attr("y", function(d, i){ return i*100; });

而且你的酒吧就會出現。

來源

2015-09-20 06:41:56 ColinE

d3js：條形圖不可見，沒有錯誤顯示

回答

相關問題