Как перевернуть ось x-y при нажатии с помощью d3

Я использую диаграмму d3 для построения графика.Как перевернуть ось x-y при нажатии с помощью d3

Я ищу что-то, с помощью которого я могу перевернуть мою ось одним нажатием кнопки. Сказав, что я имею в виду, я ищу функциональность, которая без проблем работает для всех типов диаграмм, таких как бар, строка, стек и т. Д.

Неужели кто-нибудь сделал какую-нибудь удивительную работу? Пожалуйста, помогите

Here is the sample

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

источник

2013-11-21 Aditya Sethi

Как это сделать, зависит от того, какой масштаб вы используете. В принципе, вам нужно отменить входной или выходной домен. –

Буду рад, если вы можете привести мне пример. Я в основном хочу, чтобы ось x стала y и y становилась x. Поступая таким образом, мы увидим вертикальные полосы вместо горизонтальных. –

О, такой флип. Для этого вам нужно перерисовать весь график - сначала настройте весы с новыми диапазонами, затем нарисуйте полосы, линии и оси в соответствующих положениях. Я не знаю никаких примеров. –

Вы также можете сделать две версии вашей диаграммы (вертикальной & турник версии), и достичь таких же аффект имея «Флип Оси» видимость кнопки переключения между ними.

источник

2013-11-21 15:33:55 BellBearBadger

Неплохая идея? Я думал создать функцию, которая могла бы просто перевернуть ось, сказав, что я имею в виду уникальную функцию, которая могла бы сделать это для любой диаграммы, будь то строка или строка или стек. –

Если вы аккуратно организуете свою диаграмму, вы можете получить флип с помощью 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 - использовать этот формат в будущем.

источник

2014-01-12 17:46:16 AmeliaBR

Как перевернуть ось x-y при нажатии с помощью d3

ответ

Смежные вопросы