Изменить масштаб оси y в dc.js

Я пытаюсь отформатировать значения чисел оси Y до 1, 10, 100, 1000, 10000, а пока форматированные значения отображаются в надежде, я не могу найти способ показать только некоторые метки тика. Цель состоит в том, чтобы показать только 10, 100, 1000 и т.д., а не 20, 30, 40, 50, 60 и т.д.Изменить масштаб оси y в dc.js

Используя dc.js и crossfilter для определения размеров и группировки:

var lineChart = dc.lineChart("#dc-line-chart"); 

    lineChart 
      .width(500) 
      .height(500) 
      .margins({top: 10, right: 50, bottom: 30, left: 40}) 
      .dimension(yearValue) 
      .group(yearValueGroup) 
      .brushOn(false) 
      .renderHorizontalGridLines(true) 
      .renderVerticalGridLines(true) 
      .y(d3.scale.log().domain([.5, 1000000])) 
      .x(d3.scale.linear().domain([2000, 2050])) 
      .yAxis().tickFormat(d3.format(",.0f"));

Я видел примеры пользовательских решений javascript, но, похоже, должно быть более простое решение. Буду признателен за любую оказанную помощь.

источник

2015-09-23 Patrick Marcotte

Если вы знаете точные тики, которые вы хотите, вы должны использовать [d3.axis.tickValues] (https://github.com/mbostock/d3/wiki/SVG-Axes#tickValues). – Gordon

Это сработало, спасибо! Он ограничивает линии сетки указанными значениями, но достаточно близко к тому, что нам нужно в этот момент. –

Я смог применить пример от http://bl.ocks.org/mbostock/5537697 к диаграмме dc.js. Обновленный код приведен ниже.

 var lineChart = dc.lineChart("#dc-line-chart"); 
     lineChart 
      .width(550) 
      .height(400) 
      .margins({top: 10, right: 20, bottom: 30, left: 60}) 
      .dimension(yearValue) 
      .group(yearValueGroup) 
      .brushOn(false) 
      .renderHorizontalGridLines(true) 
      .renderVerticalGridLines(true) 
      .y(d3.scale.log().domain([.5, 1000000])) 
      .x(d3.scale.linear().domain([2000, 2100]))   
      .yAxis().ticks(10, ",.0f").tickSize(5, 0);

EDIT: Учитывая гибкость предлагаемых dc.js, это кажется хорошей идеей, чтобы рассмотреть вопрос о добавлении «.clamp (истина)» всякий раз, когда группировка данных с неизвестными границами или данными, которые вы знаете, иногда дают результаты за пределы вашего домена (т. е. нуль в случае масштабирования журнала). .y линия теперь гласит:

.y(d3.scale.log().clamp(true).domain([.5, 1000000]))

Более подробно об этом можно найти на https://github.com/mbostock/d3/wiki/Quantitative-Scales#log_clamp.

источник

2015-09-27 20:56:10

Изменить масштаб оси y в dc.js

ответ

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