Расширение c3js с помощью кода d3js

Question

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

Спасибо

Answer 1

Хотя вы можете получить доступ к элементам диаграммы 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.

Answer 2

Вы можете использовать функцию onRendered для написания кода d3.js, чтобы проверить ссылку со страницы c3.js.

Примечание: если вы используете угловой 2+, вы должны использовать функцию стрелки вместо функции с клавишей "function"

`var chart = c3.generate({
    data: {
        columns: [
            ['sample', 30, 200, 100, 400, 150, 250]
        ]
    },
    onrendered: function () {
        // d3 code - click functionality
    }
});
`

Кроме того, c3 имеет функцию onclick, которую вы можете изменить и использовать повторно. для справки проверьте это

Разработайте функциональность, которую вы хотите реализовать, чтобы вы могли найти лучшее решение