如何使用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的外部资源选项 - 将来使用此格式。