我是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/