Zen*_* Qu 5 user-interface visualization zooming d3.js
我想要在条形图上缩放+画笔。我能够实现缩放 ok: demo here,但我发现缩放后,当您向下拖动鼠标时,条形图会移动。我不希望条形图通过鼠标拖动而移动。我希望条形图保留在原来的位置,并且我想使用鼠标拖动进行刷动。条形图可能可以左右滚动,但不应该左右拖动。
如何使条形图保持在原来的位置?
我的代码片段如下。完整脚本在这里(134 行)
var zoom = d3.behavior.zoom()
.x(x)
.scaleExtent([0.8, 10])
.on("zoom", zoomed);
function zoomed() {
// scale x axis
svg.select(".x.axis").call(xAxis);
// scale the bars
var width_scaled = columnwidth * d3.event.scale;
svg.selectAll(".bargroup rect")
.attr("x", function(d) {return x(d.date) - width_scaled/2;})
.attr("width", width_scaled);
}
var brush = d3.svg.brush()
.x(x)
.on("brush", brushed);
function brushed() {
//console.log(brush.extent());
}
var svg = d3.select("#timeline").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
svg.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height + 7);
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
4032 次 |
| 最近记录: |