我是 D3 新手。我正在遵循这个很棒的教程,该教程制作了一个灵活的图表,无论创建多少个条形图,该图表都会填充您的宽度和高度的大小。 (“新图表”)。 http://chimera.labs.oreilly.com/books/1230000000345/ch06.html#_the_new_chart
我在使用自己的数据时遇到问题。这是使用非常简单的数据集制作条形图的教程代码:
var w = 500;
var h = 100;
var barPadding = 1;
var data = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//Create SVG element
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) {
return h - (d * 4);
})
.attr("width", w / data.length - barPadding)
.attr("height", function(d) {
return d * 4;
});
我认为我的不起作用,与教程代码的 data.length 部分有关:
.attr("x", function(d, i) {return i * (w / data.length);
或者这可能是我从数据中请求“时间”的方式。这是我的代码:
<div id="chart">
<svg width="800" height="600"><g class="group"></g>
</svg>
</div>
var w = 500;
var h = 100;
var barPadding = 1;
var data = [
{"name": "The Kings speech", "time": 118},
{"name": "Slumdog Millionaire", "time": 120},
{"name": "Shakespeare in Love", "time": 122},
{"name": "Chariots of Fire", "time": 123},
]
d3.select('svg g.group')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', function(d, i) {return i * (w / data.length)})
.attr('y', function(d) {return h - d['time'];})
.attr('width', w / data.length - barPadding)
.attr('height', function(d) {return d['time'];})
我知道这对很多人来说都很简单,但我在这上面花了太长时间,你会帮我解决这个问题!谢谢
最佳答案
您有一个拼写错误,半列应该在 ['time']
之外:
.attr('y', function(d) {return h - (d['time';])})
应该是
.attr('y', function(d) {return h - d['time'];})
您应该查看开发者控制台中显示的错误消息来识别错误。
问题更新后编辑:
你的 javascript 代码应该包含在 <script type="text/javascript">
周围和</script>
关于javascript - 使用 D3 创建具有复杂数据集的灵活条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27291447/