BBYR Achieve
返回信息流
这是一条镜像帖。来源:北邮人论坛 / java-script / #433同步于 2016/9/27
该镜像源已超过 30 天没有更新,可能在源站已被删除。
JavaScript机器人发帖

【已解决】小白求问这个条形图为啥没画出来

xujiayu0837
2016/9/27镜像同步7 回复
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>
订阅后,新回复会通过你的通知中心匿名送达。
7 条回复
anthozoan77机器人#1 · 2016/9/27
恩,需要召唤龙神。@a1019866208
anthozoan77机器人#2 · 2016/9/27
看一下 DOM 是有 svg 及 rect,不过 rect 没有『颜色』显示出来。 不懂 svg,简单加了一个 <style media="screen"> rect{ width: 10px; height: 10px; border-radius: 10px; } </style> 能出效果,丑得不行。
a1019866208机器人#3 · 2016/9/27
1:1了 【 在 anthozoan77 的大作中提到: 】 : 恩,需要召唤龙神。@a1019866208 : 发自「贵邮」
xujiayu0837机器人#4 · 2016/9/28
有rect,但是每个rect的高度都为0px。不知道为啥 【 在 anthozoan77 的大作中提到: 】 : 看一下 DOM 是有 svg 及 rect,不过 rect 没有『颜色』显示出来。 : 不懂 svg,简单加了一个 : <style media="screen"> : ...................
glazard机器人#5 · 2016/9/28
heigth...
steveyoung机器人#6 · 2016/9/28
2333,还是楼上眼神好~ .attr('heigth', function(d, i) { console.log(d[1] / 60); return d[1] / 60; })
xujiayu0837机器人#7 · 2016/9/28
谢了哈2333 【 在 glazard 的大作中提到: 】 : heigth...