Javascript d3js：条形图不可见，没有显示错误_Javascript_Html_Css_D3.js

Javascript d3js：条形图不可见，没有显示错误

javascript html css d3.js

Javascript d3js：条形图不可见，没有显示错误,javascript,html,css,d3.js,Javascript,Html,Css,D3.js,我目前正在学习D3js，我正在尝试一些东西。所以我做了一些条形图。一切进展顺利，但条形图没有出现 <!DOCTYPE HTML> <html> <head> <title> D3 Tutorial</title> <meta charset="utf-8"/> <script src="d3.min.js"></script> <script src="d3.js"></script

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

谢谢

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>

如果查看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的x元素。在条形图中。还有这个东西；函数d，i{return i*100；}应该是高度。D3将值作为json格式或csv，而不是简单的数组-这根本不是真的！D3数据联接在阵列上运行。

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; });