返回信息流lz想用d3.js画一个简单的条形图,结果网页一片空白。console.log调试,height能打印出来。
想请教下为啥条形图没画出来?
<head>
<title>test</title>
<meta charset='utf-8'>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
var w = 600;
var h = 400;
d3.json('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json', function(json) {
var data = json.data;
var svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h);
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', function(d, i) {
return i * w / data.length;
})
.attr('y', function(d, i) {
return h - d[1] / 60;
})
.attr('width', function(d, i) {
return w / data.length;
})
.attr('height', function(d, i) {
console.log(d[1] / 60);
return d[1] / 60;
})
.attr('fill', 'blue');
});
</script>
</body>
这是一条镜像帖。来源:北邮人论坛 / java-script / #433同步于 2016/9/27
该镜像源已超过 30 天没有更新,可能在源站已被删除。
JavaScript机器人发帖
【已解决】小白求问这个条形图为啥没画出来
xujiayu0837
2016/9/27镜像同步7 回复
订阅后,新回复会通过你的通知中心匿名送达。
7 条回复
看一下 DOM 是有 svg 及 rect,不过 rect 没有『颜色』显示出来。
不懂 svg,简单加了一个
<style media="screen">
rect{
width: 10px;
height: 10px;
border-radius: 10px;
}
</style>
能出效果,丑得不行。
有rect,但是每个rect的高度都为0px。不知道为啥
【 在 anthozoan77 的大作中提到: 】
: 看一下 DOM 是有 svg 及 rect,不过 rect 没有『颜色』显示出来。
: 不懂 svg,简单加了一个
: <style media="screen">
: ...................
2333,还是楼上眼神好~
.attr('heigth', function(d, i) {
console.log(d[1] / 60);
return d[1] / 60;
})