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

Question

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

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 

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

Answer 1

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

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

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

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

Answer 2

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

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

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

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