Подтвердить что ты не робот

Кроссфильтр, интеграция d3.brush и nvd3

Я просмотрел домашнюю страницу crossfilter

И очень нравится, что происходит. Но я не хочу писать все свои графики, если мне это не нужно. Я уже смотрел в dc.js, что довольно приятно и дает вам встроенную интеграцию кроссфильтра и фильтрацию.

Однако dc не хватает некоторых вещей, которые мне нужны, которые я получаю от nvd3. Однако получение какой-либо фильтрации кросс-графа (с кистью или кликом и т.д. В зависимости от типа графика) с помощью crossfilter в/в верхней части nvd3 выглядит как большая часть работы. Я не видел и не слышал, чтобы какой-либо тип этой работы происходил где угодно, но это похоже на естественную прогрессию nvd3.

Является ли добавление фильтрации кросс-графа и перекрестного фильтра в nvd3 легким, и я просто не замечаю прямолинейного решения этой проблемы?

Как люди справляются с этим?

Спасибо.

Ответ 1

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

Если вы хотите связать Crossfilter и NVD3, вам необходимо вручную обновить домен/диапазон NVID3 или данные об изменениях в состоянии параметров/групп перекрестного фильтра. Это в основном то, как обрабатывается пример страницы Crossfilter, если вы проверяете источник: http://square.github.io/crossfilter/. Всякий раз, когда кисти меняются, графики перерисовываются и обновляются, чтобы отразить изменения.

Получение диаграмм NVD3 для перерисовки и отображения новых данных легко. Вы можете просто обновить базу данных и снова вызвать баркард... например.

var svg = d3.select("body").append("svg").style("height", "500px");
var barChart = nv.models.multiBarChart();

// Just execute this block each time the chart data changes
// and the chart will update in a nicely animated manner
svg
    .datum(chartData)
    .transition()
    .duration(500)
    .call(barChart);

Трудная часть на самом деле была бы, если бы вы хотели иметь кисти, встроенные в диаграммы NVD3. Это может показаться сложным, потому что вам придется держать кисти синхронизированными с диаграммами NVD3, так как их данные изменяются так, что они рисуются правильно, но если вы просто хотите правильно настроить диаграмм NVD3 на основе других событий кисти диаграммы или вам вообще не нужны кисти, это не должно быть слишком сложно. Хороший учебник по кистям находится здесь: http://bl.ocks.org/mbostock/1667367

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

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

Лично у меня есть пользовательская диаграмма временной шкалы, которую я создал, которая использует кисти и срабатывает при обновлении кисти. В событиях я затем обновляю данные для гистограмм NVD3 и перерисовываю их. Таким образом, по мере изменения фильтра временной шкалы анимированная диаграмма и обновления. Это довольно гладко, чтобы увидеть его в действии.

В любом случае, это звучит как интересная задача. Удачи!