如何缩放灵活的条形图

时间:2014-12-04 21:58:31

标签: d3.js

我是D3的新手,我正在尝试缩放此条形图(以便最长的条形更长,最短的条形更短)

这是我的代码,它允许我的图表在添加更多数据时变得灵活。

 <svg width="800" height="600"><g class="group"></g>
 </svg>

 var w = 500;
 var h = 130;
 var barPadding = 2;

 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'];})

我尝试使用像这样的缩放功能,但它不起作用

 var Scale = d3.scale.linear().domain([100, 150]).range([0, 50]);

.attr('x', function(d, i) {return i * (w / data.length)})
.attr('y', function(d) {return h - Scale(d['time'];})
.attr('width', w / data.length - barPadding)
.attr('height', function(d) {return Scale(d['time'];)}

这是一个好方法吗?我还能尝试什么?非常感谢任何帮助,谢谢。

0 个答案:

没有答案