我有一个基本的D3条形图,其中x轴是序数比例尺,y轴是线性比例尺。
我添加了缩放功能,对于线性比例尺它可以正常工作。
如何使得x轴随着缩放水平相应地调整?
这是当前的情况:http://jsfiddle.net/bM4HC/1/ 下面的js代码在序数比例尺上无法使用:
我添加了缩放功能,对于线性比例尺它可以正常工作。
如何使得x轴随着缩放水平相应地调整?
这是当前的情况:http://jsfiddle.net/bM4HC/1/ 下面的js代码在序数比例尺上无法使用:
这是做法:
function zoom() {
bars.attr("transform", "translate(" + d3.event.translate[0]+",0)scale(" + d3.event.scale + ",1)");
chart.select(".x.axis")
.attr("transform", "translate(" + d3.event.translate[0]+","+(height)+")")
.call(xAxis.scale(x.rangeRoundBands([0, width * d3.event.scale],.1 * d3.event.scale)));
chart.select(".y.axis")
.call(yAxis);
}
仅仅在X轴上翻译和缩放条形图,不是x轴和y轴,同时使用d3.event.translate[0](x轴)翻译x轴。
编辑1:这里有一个带有clip-path的更新示例: http://jsfiddle.net/9rypxf10/
clip-path
,但当svg元素被平移和缩放时似乎无效。 - dino
[min,max]
格式更改比例尺的域。有关刷选功能的问题,请参见此相关问题以获取解决方法,如果还有其他问题无法解决,请告诉我。 - AmeliaBR