d3js：条形图不可见，也没有出现错误答案

【问题标题】：d3js: Bar charts are not visible and no errors are showing upd3js：条形图不可见，也没有出现错误
【发布时间】：2015-09-19 17:54:28
【问题描述】：

我目前正在学习 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>

谢谢！

【问题讨论】：

好像你缺少矩形的 x 元素。在条形图中。还有这个东西；函数(d, i){ 返回 i*100; }) 应该是高度。

标签： javascript html css d3.js

【解决方案1】：

如果您查看您的 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; });

你的酒吧就会出现。

【讨论】：

【解决方案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>

【讨论】：

“D3 将值作为 json 格式或 csv 而不是简单的数组”——这根本不是真的！ D3 数据连接对数组进行操作。