Расширение c3js с кодом d3js

Я новичок в c3js, поэтому извиняюсь, если этот вопрос звучит основательно. Библиотека c3js кажется очень мощной, но есть некоторые функции в d3js, которые в настоящее время недоступны в c3js, которые я планирую использовать внутри моего кода c3js. Кто-нибудь имеет опыт использования d3js-кода с c3js или с помощью d3js внутри или c3js-кода. Для справки я планирую использовать функции щелчка, присутствующие в d3js, в моих визуализациях, встроенных в c3js.Расширение c3js с кодом d3js

благодаря

источник

2015-07-08 show_stopper

Я лично не использовал C3.js, но, полагая, что он оставляет все сгенерированное содержимое в виде svg-элементов, тогда было бы достаточно просто сделать 'd3.selectAll (...). On (" click " , function) 'command для привязки событий кликов. Однако, скорее всего, для более сложного взаимодействия потребуется достойное понимание библиотеки C3. Например, если C3.js делает что-то со связанными данными, что делает его менее доступным, простые операции могут стать гораздо более сложными. Если то, что вы делаете, не слишком глубокое, вам может быть лучше развиваться из scrach в D3 (очевидно, это займет значительно больше времени). – JSBob

c3.js фактически построен на вершине d3js, и весь код c3.js является внутренним d3js. Да, вы можете настроить c3js, переопределив некоторые внутренние функции, если конфигурация недоступна. Для некоторых примеров см. Форум c3.js google. Например: https://groups.google.com/forum/#!forum/c3js – Chetan

В то время как вы можете получить доступ к элементам c3 диаграммы, используя классы, c3 использования (вы можете найти полный список классов в источнике в https://github.com/masayuki0812/c3/blob/master/c3.js#L5754), это, вероятно, не было бы правильно прикрепить любые обработчики кликов - причина в том, что диаграммы c3 отображаются в слоях, и событие click не может быть фактически вызвано, потому что оно используется слоем, который выше.

Например, в то время как

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', 30, 200, 100, 400, 150, 250], 
      ['data2', 130, 100, 140, 200, 150, 50] 
     ], 
     type: 'bar' 
    } 
}); 

d3.selectAll('.' + c3.chart.internal.fn.CLASS.bar + ':nth-child(2)').attr('display', 'none');

бы хороший способ скрыть 2-й набор точек данных, вы не можете использовать те же прикрепить обработчик щелчка для 2-го набора точек данных.

Правильный способ сделать это будет использовать data.onclick, который предоставляет c3 - см. http://c3js.org/reference.html#data-onclick.

источник

2015-07-19 11:13:41 potatopeelings

Расширение c3js с кодом d3js

ответ

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