我是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'];)}
这是一个好方法吗?我还能尝试什么?非常感谢任何帮助,谢谢。