d3js:条形图是不可见的，没有错误显示

d3js: Bar charts are not visible and no errors are showing up

本文关键字：有错误 显示 条形图 d3js      更新时间：2023-09-26

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

谢谢!

如果查看一下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; });

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>
相关文章：