D3.js 用d3js代码扩展c3js

我是c3js新手，如果这个问题听起来很基本，我深表歉意。c3js库似乎非常强大，但d3js中有一些功能目前在c3js中不可用，我计划在c3js代码中使用这些功能。有没有人有过在c3js中使用d3js代码或在c3js代码中使用d3js的经验。 作为参考，我计划在c3js中构建的可视化中使用d3js中的单击函数

---

感谢您，您可以使用c3使用的类访问c3图表元素（您可以在源代码中找到完整的类列表），这可能不是附加任何单击处理程序的正确方法-原因是c3图表在层中呈现，并且您的单击事件实际上可能不会被触发，因为它被上面的层使用

比如说,

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');

这是隐藏第二组数据点的一个好方法，您不能使用相同的方法为第二组数据点附加单击处理程序

---

正确的方法是使用c3提供的data.onclick-请参阅。

您可以使用onRendered函数来编写d3.js代码 查看参考页

注意：如果您使用的是angular 2+功能，则应使用箭头功能，而不是带有按键“function”的功能

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

此外，c3还具有onclick功能，您可以修改和重新利用这些功能。供参考

---

详细说明您想要实现的功能，您可以获得更好的解决方案

我个人没有使用C3.js，但是假设它将所有生成的内容都保留为svg元素，那么执行

d3就足够容易了。selectAll（…）。on（“click”，function）

命令绑定单击事件。然而，为了进行更复杂的交互，很可能需要对C3库有充分的了解。例如，如果C3.js对绑定数据做了一些使其不易访问的操作，那么简单的操作可能会变得更加复杂。如果您所做的不是太深入，那么您最好在D3中使用scrach进行开发（显然这将花费更长的时间）。c3.js实际上构建在d3js之上，所有c3.js代码在内部都是d3js。是的，如果配置不可用，您可以通过重写某些内部函数来定制c3js。请参考c3.js谷歌讨论论坛了解一些示例：-