Блог

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

На диаграмме также есть сгруппированные значения y. То есть, есть две оси y: по одной для каждой группы, и внутри каждой из них три линии (подгруппы). Семантически намерение состоит в том, чтобы сказать: «Для этого купона на эту дату есть столько-то показаний для каждого типа данных«. Чтобы помочь прояснить мои дальнейшие намерения, в этой библиотеке есть очень похожее решение, к которому я стремлюсь.

Хорошо, и твой вопрос…?

Мой вопрос заключается в том, чтобы выровнять прямоугольники с галочками и сохранить их такими. Как я могу сделать так, чтобы они всегда совпадали с галочками? Есть ли способ «привязать» прямую кишку к клещу? Что еще хуже, график должен быть масштабируемым, поэтому при прокрутке и изменении размеров тиков прямоугольники должны придерживаться соответствующих тиков: двигаться вместе с ними, соответственно изменять их ширину и так далее. В принципе, я хотел бы «женить» прямые на их соответствующих галочках.

Что вы пробовали?

Мой подход прямо сейчас состоит в том, чтобы сделать ширину сегментов зависимой от текущего количества тиков и, по сути, рассматривать текущие тики так, как если бы они были моими данными. То есть:

 segmentWidth = state.width() / ticks.length;
 

И при обновлении/рендеринге прямых:

 state.mainG.selectAll('g.couponData')
    .selectAll('g.column')
    .data(ticks)
    ...
 

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

Вот пример того, что у меня есть:https
://jsfiddle.net/bnekvp0o/11/

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

Заранее спасибо!