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：順序縮放和縮放/平移

回答

相關問題