D3.js Получить ширину столбца гистограммы/столбца

Я создаю диаграмму, которая отображает опубликованные даты документов в наборе.D3.js Получить ширину столбца гистограммы/столбца

Эти даты могут очень сильно отличаться между днями, месяцами & лет.

values = [Mon Jan 01 2001 00:00:00 GMT+0000 (GMT Standard Time), Tue Jan 02 2001 00:00:00 GMT+0000 (GMT Standard Time), ... , Thu Jan 09 2003 00:00:00 GMT+0000 (GMT Standard Time)]

Так я использую «d3.layout.histogram» в группу документ относится к 10 (или как можно ближе) бункеров.

var x = d3.time.scale().domain([firstDate, lastDate]).range([0, width]); 

var data = d3.layout.histogram() 
     .bins(x.ticks(bins)) 
     (values); 

var formatDate = d3.time.format("%d/%m/%y"); 
var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom") 
      .tickFormat(formatDate);

Затем рисование прямоугольника полосы при фиксированном 10px (А на диаграмме) Ширина следующим образом:

bar.append("rect") 
     .attr("x", 0) 
     .attr("width", function(d) { 
      rtnW = 10;   
      return rtnW; 
     }) 
     .attr("height", function(d) { return height - y(d.y); });

Если я попытаться установить ширину динамически, это хорошо до тех пор, пока клещ расположены равномерно по оси:

.attr("width", (width/(x.ticks(bins).length-1))-1)

Однако, если клещи не подходят именно тогда вы получаете запасной масштаб на переднем & конце оси, которая скидывает colu (на диаграмме!) mn.

Так что вопрос:

Как вычислить/получить, реальная ширина (B на рисунке) между каждым тиком на XAxis? (Если бы я мог вернуть даты по галочку 1 & 2, я, вероятно, тоже мог бы это исправить. Может ли помочь axis.tickValues?).

Column Width

Большое спасибо!

источник

2013-07-23 ukmikeb

Я не уверен, что вы пытаетесь сделать, но вы можете получить тики оси, используя '.ticks()' функции. Чтобы получить разницу в координатах экрана между тиками, возьмите, например, первые два значения, передают их в ваш масштаб и вычисляют разницу. Похоже, проблема может заключаться в положении баров, а не в ширине. –

Я думаю, что подход Ларса умен. Если вы знаете длину оси x (что вы делаете), и вы знаете даты и время начала и окончания на этой оси (что вы делаете (я бы предпочел, чтобы работа в секундах была лучше)), и если вы знаете количество тиков на графике (которое было бы точкой, где мог бы понадобиться мой хитрый план), вы могли бы вычислить интервалы. Я думаю, вам, возможно, придется немного экспериментировать. – d3noob

Все, что вам нужно для расчета интервала, - это две смежные точки на оси. –

Следуя предложению @larskothoff для использования x scale .ticks(), я придумал это решение для нахождения промежутка между тиками, которые были динамически сгенерированы гистограммой D3.

Как сказал Ларс в комментариях, вы можете получить тики из шкалы (x), если знаете, сколько клещей есть. Мы можем получить это из xAxis.

var tickCount = xAxis.ticks()[0];

Передайте это в шкалу x .tick(), чтобы вернуть тики (все даты на шкале).

x.ticks(tickCount)

Чтобы получить й позицию первого дня по шкале, мы передаем эту дату в масштаб:

var firstDate = x(x.ticks(tickCount)[0]);

Чтобы получить й вторую дату по шкале:

var secondDate = x(x.ticks(tickCount)[1]);

Наконец, чтобы вычислить ширину столбца:

var colWidth = secondDate - firstDate;

Более сжато (и удаление 1 для заполнения):

var colWidth = Math.floor(x(x.ticks(xAxis.ticks()[0])[1]) - x(x.ticks(xAxis.ticks()[0])[0])) - 1;

Это работает со всеми моими данными испытаний до сих пор, и кажется, что решение. Предложения более надежного/эффективного метода приветствуются!

источник

2013-07-24 09:15:56 ukmikeb

Хорошая работа для вас и Ларс. Это, безусловно, подчеркивает то, чего я не знал. ура – d3noob

Это должно работать:

.attr("width", function(d) { return x(d.dx + d.x) - x(d.x) })

источник

2013-11-11 13:12:13

D3.js Получить ширину столбца гистограммы/столбца

ответ

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