d3.js：顺序缩放和缩放/平移

我有一个基本的D3条形图，它具有顺序x尺度和线性y尺度。d3.js：顺序缩放和缩放/平移

我已经添加了缩放功能，它可以在线性y尺度下正常工作。

我如何才能获得x-比例以相应的缩放比例进行调整？

这里是它的外观现在：http://jsfiddle.net/bM4HC/1/

JS的下方不序尺度上发挥作用：

d3.behavior.zoom() .x(x);

来源

2014-02-27 gipadm

[本示例]（http://bl.ocks.org/stepheneb/1182434）示出了如何调整x轴和y轴根据变焦。 – FernOfTheAndes

该示例引用线性比例。我正在努力与一个序数。 – gipadm

您无法将序号比例链接到缩放行为，因为缩放行为会尝试使用线性比例的[min，max]格式更改比例域。请参阅[与刷牙功能有关的这个问题]（http://stackoverflow.com/a/21492940/3128209）以获得解决方法，并让我知道是否还有其他解决办法无法解决。 – AmeliaBR

这是为了做到这一点：

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

http://jsfiddle.net/0917vvqt/

只需翻译和缩放X中的小节而非x和y，并使用d3.event.translate [0]（x轴）翻译xAxis。

EDIT 1： 这里是更新的例子与夹路径： http://jsfiddle.net/9rypxf10/

来源

2014-08-25 16:44:32 kevinkl3

这真的很有帮助;感谢分享！你如何裁剪数据，使域外的东西不会出现？我正在使用另一个使用'clip-path'的d3缩放例子，但是当svg元素被翻译和缩放时似乎不起作用。 – dino

@dino不用客气，使用clip-path是做到这一点的方法，下面是一个更新的例子：http://jsfiddle.net/9rypxf10/。 – kevinkl3

d3.js：顺序缩放和缩放/平移

回答

相关问题