Question

我正在使用d3图表绘制一些图表。

我正在寻找能够通过点击按钮来翻转我的轴的东西。说到我的意思是，我正在寻找能够无缝适用于所有类型的图表的功能，如条形图，线条图，堆栈等。

有没有人这样做过一些很棒的工作？请帮忙

Here is the sample

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

Answer 1

如果您仔细排列图表，则应该能够通过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 - 将来使用这种格式。

Answer 2

您还可以绘制两个版本的图表（垂直和水平条版本），并通过“翻转轴”按钮在两者之间切换可见性来实现类似的效果。

如何使用d3在点击时翻转x-y轴

2 个答案: