Как манипулировать осью диаграммы svg?

Я рисую диаграмму рассеяния, используя d3.js и epoch. Значения, которые становятся кругами в диаграмме, основаны на значениях журнала, что делает мою обе оси ниже нуля.Как манипулировать осью диаграммы svg?

var chart = $('#scatterchart').epoch({ type: 'scatter', data: scatterData, axes: ['bottom', 'left'], ticks: { right: 4, bottom: 4}, domain: [-1.4, 2], range: [-2,4], margins: { top: 10, right: 80, bottom: 60, left: 80 }, });

Я хотел бы сохранить положение кругов, но манипулировать оси так, чтобы:

x(horisontal): 
-1 -> 0.5 
0 -> 1 
1 -> 2 
2 -> 4 

y(vertical): 
-2 -> 0.25 
-1 -> 0.5 
0 -> 1 
1 -> 2 
2 -> 4 
3 -> 8 
4 -> 16

Любой, кто имеет какие-либо предложения о том, как это сделать?

источник

2017-02-01 Anna-Karin Vesterberg

Вы имеете в виду заменить метки тика (-1 становится .5, 0 становится 1, ...)? – GuitarExtended

@ Это будет очень легко с помощью d3: 'var myScale = d3.scalePow(). Exponent (2)'. Однако, согласно документации Epoch, кажется, что вы не можете установить тип шкалы d3. –

@GuitarExtended, точно так же. Теперь я скрываю курсорные метки, чтобы показалось, что круги находятся прямо на графике, и я хочу найти способ перевести значения меток от -1 до 0,5 и т. Д. –

-1

У меня нет опыта с эпохой.

Но при условии, что это работает на вершине d3js, все, что вам нужно сделать, это изменить домен обоих ваших масштабов.

Когда вы визуализируете свои данные, вы работаете с доменом (для данных) и диапазоном (пиксели на экране). Поэтому для поддержки отрицательных значений вам необходимо настроить домен для поддержки [-2, 4] (для примера оси y).

В качестве бонуса некоторые чтение о domains и negative values

источник

2017-02-01 10:27:14

У меня нет опыта работы с epoch.js, и я не знаю, если вы можете настроить ось, которые он создает. Но вы можете попытаться преобразовать свои данные, прежде чем загружать их в генератор рассеянного экрана.

Если scatterData является массивом, то вы могли бы использовать array.map():

newData = scatterData.map(function(d){return someTransformFuntion(d);});

И адаптировать входную область вашей оси (на самом деле, ваша шкала) соответственно.

источник

2017-02-08 09:41:23 GuitarExtended

Как манипулировать осью диаграммы svg?

ответ

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