条形图没有显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了条形图没有显示相关的知识，希望对你有一定的参考价值。
我正在研究第一组D3 tutorials并且有一个问题，显示SVG的区域，但没有任何属性的<rect>s！
这些是javascript，css和html源代码！
var svgWidth =500;
var svgHeight = 300;
var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight)
.attr("class","bar-chart");
var dataset = [80,100,56,120,130,44,55,120,160];
var barPadding = 5;
var barWidth = (svgWidth/dataset.length);
var barChart = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y",function(d){
return svgHeight - d;
})
.attr("width", barWidth - barPadding)
.attr("transform", function(d,i){
var translate = [barWidth * i, 0];
return "translate("+translate+")";
});.bar-chart{
background-color: #c7d9d9;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<svg></svg>
</body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="./js/index.js"></script>
</html>我的错是什么？
答案
你没有指定身高 -
.attr("height", function(d) {
return d;
})
var svgWidth =500;
var svgHeight = 300;
var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight)
.attr("class","bar-chart");
var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var barPadding = 5;
var barWidth = (svgWidth/dataset.length);
var barChart = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y",function(d){
return svgHeight - d;
})
.attr("height", function(d) {
return d;
})
.attr("width", barWidth - barPadding)
.attr("transform", function(d,i){
var translate = [barWidth * i, 0];
return "translate("+translate+")";
});.bar-chart{
background-color: #c7d9d9;
}<svg></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>另一答案
需要缩小条形图的“y轴”。我们来看看下面的代码（参见提供的链接）
var data = [80,100,56,120,130,44,55,120,160];
var width = 500,
barHeight = 20,
margin = 1;
var scale = d3.scale.linear().domain([10,1000]).range([50,500]);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function (d, i) {
return "translate(0," + i * barHeight + ")";
});
g.append("rect")
.attr("width", function (d) {
return scale(d);
})
.attr("height", barHeight - margin)
g.append("text")
.attr("x", function (d) { return (scale(d)); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function (d) { return d; });
https://www.tutorialsteacher.com/d3js/scales-in-d3
以上是关于条形图没有显示的主要内容，如果未能解决你的问题，请参考以下文章
Rechart 条形图：除了条形图啥都不显示？ （全宽和全高？）