用 d3js 代码扩展 c3js

Question

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

感谢

Answer 1

虽然您可以使用 c3 使用的类访问 c3 图表元素（您可以在 https://github.com/masayuki0812/c3/blob/master/c3.js#L5754 的源代码中找到类的完整列表），但这可能不会这是附加任何点击处理程序的正确方法 - 原因是 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 - 参见 http://c3js.org/reference.html#data-onclick.

Answer 2

可以使用onRendered函数写d3.js代码查看 reference from c3.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 功能。供参考check this

详细说明你想要实现的功能，希望你能得到更好的解决方案

用 d3js 代码扩展 c3js

Extending c3js with d3js code

d3.js

visualization

data-visualization

c3.js