Линейная диаграмма с использованием порядковой оси x с d3.js и nvd3.js

Я пытаюсь сделать линейную диаграмму из набора данных, сохраняя категориальность оси X. Для наблюдателя это будет выглядеть как линейная диаграмма с равноудаленными интервалами между координатами X наблюдений:

( 1 ------ 5 ------ 30 ------ 600)

На данный момент я получаю что-то вроде этого:

(1-5-----30-------------------600)

Это мой набор данных:

var ds1 =  [
  {
    key: 'VAR-1',
    color: '#FF7F0E',
    values: [
   { "x" : "600", "y" : 0.07706} 
 , { "x" : "30", "y" : 0.00553} 
 , { "x" : "5", "y" : 0.00919} 
 , { "x" : "1", "y" : 0.00969} 
    ]
  }
];

Я попытался создать ось порядкового номера и установить ее в объекте линейной диаграммы:

var chart =nv.models.lineChart()
             .margin({top: 10, bottom: 40, left: 60, right: 30});   
var x = d3.scale.ordinal().domain(["1","5", "30", "600"]);
chart.xAxis.scale(x);

chart.yAxis
    .tickFormat(d3.format(',.3f'));

chart.forceY([0]);

d3.select('#exampleOne')
    .datum(ds1)
    .transition().duration(500)
    .call(chart);

Однако в сюжете, похоже, ничего не меняется.

Мне было интересно, может ли вообще быть включена ось порядка в реализации линейной диаграммы NVD3, или эта линейная диаграмма была написана только для числовых данных?

PS: я новичок в d3.js, поэтому, возможно, я делаю что-то не так.


javascript d3.js linechart nvd3.js
person user1946927    schedule 03.01.2013    source источник
comment
Не могли бы вы опубликовать свое решение?   -  person Becky    schedule 25.04.2014

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте установить rangeBounds([0, chartWidth]) для шкалы. то есть

d3.scale.ordinal().domain(["1","5", "30", "600"]).rangeBounds([0, width]);

Исправление: я думал, что ваши масштабы необходимо изменить, но на самом деле вы хотите, чтобы на графике были значения, нанесенные на равном расстоянии. Для этого вы можете изменить набор данных, который вы отправляете в lineGraph, на что-то вроде.

var ds1 =  [ {
key: 'VAR-1',
color: '#FF7F0E',
values: [
{ "x" : "4", "y" : 0.07706} 
, { "x" : "3", "y" : 0.00553} 
, { "x" : "2", "y" : 0.00919} 
, { "x" : "1", "y" : 0.00969} 
]}
];

Таким образом, хотя значения, показанные на оси X, будут порядковыми (например, 1, 5, 30, 600), значения, нанесенные на линию, будут иметь линейную шкалу.

person baradas    schedule 14.01.2013
comment
Большое спасибо, я изучил rangeBands(..) в документации, но тикеры осей по-прежнему не меняются, чтобы выглядеть равноудаленными, используя порядковую шкалу. - person user1946927; 15.01.2013
comment
Вы хотите, чтобы бегущие строки графика выглядели равноудаленными или точки, нанесенные на график, были равноудалены от оси X. Приведенный выше код изменяет масштаб маркера деления xAxis, но не масштаб линии, построенной с использованием приведенных выше данных. К сожалению, в NVD3 API нет прямого доступа для изменения этого параметра. Взгляните на реализацию models.lineChart в nv.d3.js. Один из способов реализации этого — преобразовать элементы данных оси X в значения, представляющие индексы их позиций. - person baradas; 17.01.2013

arrow_upward
0
arrow_downward

Я думаю, что вы не можете установить порядковый домен для любой линейной или точечной диаграммы в nvd3. Эти строки находятся в определении models.scatter:

  if ( isNaN(x.domain()[0])) {
      x.domain([-1,1]);
  }

  if ( isNaN(y.domain()[0])) {
      y.domain([-1,1]);
  }

Очевидно, что это запретит любые порядковые шкалы для шкал x или y в диаграммах этого типа (которые, по-видимому, лежат в основе линейных диаграмм и большинства других диаграмм, не являющихся гистограммами).

person rlgoodman    schedule 29.08.2013