如何使用d3點擊x-y軸

Question

我正在使用d3圖來繪製一些圖表。

我在尋找的東西由我可以翻轉按鈕上的點擊我的軸線。說了這麼多我的意思是，我要尋找其無縫地適用於所有類型的像條，折線圖的功能，堆棧等

有沒有人做過這樣的一些真棒工作？請幫助

Here is the sample 

http://jsfiddle.net/adityasethi2601/ae5BP/

Answer 1

你也可以繪製圖表（垂直&單槓版本）的兩個版本，並實現由具有兩者之間的「翻轉軸」按鈕切換知名度類似的效果。

Answer 2

如果您仔細安排圖表，您應該可以通過SVG Transforms來實現翻轉圖像，如果需要將其翻譯爲新邊距，然後反轉任何仍然想保持水平的文本。

作爲一個快速又髒兮兮的例子，我已經調整了你的小提琴，這樣當按鈕被點擊時，一個類將在整個SVG上切換，從而在整個圖像上觸發一個CSS rotate transform。

的Javascript：

d3.select("div#chart > svg") ///select the svg 
     .classed("rotate", function(){ 
     return !d3.select(this).classed("rotate"); 
      //check whether it is currently rotated 
      //and set it to the opposite 
     }); 

CSS：

svg.rotate{ 
    /* rotate the entire image */ 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
} 

http://jsfiddle.net/ae5BP/6/

但是請注意，CSS變換（嵌入網頁時，其適用於HTML對象，如整個SVG ）並不直接等同於SVG轉換，所以我無法對文本元素進行「反向旋轉」。要使用SVG轉換，您需要將整個圖表包裝在可應用旋轉的<g>元素中。您還需要找出適當的「旋轉中心」座標，否則將圍繞您的（0,0）原點旋轉。

但是，這應該給你從哪裏開始的想法。

P.S.我還調整了小提琴，以便正確使用JSFiddle格式和用於加載D3的外部資源選項 - 將來使用此格式。