Question

我是c3js的新手，如果这个问题听起来很基本，那么道歉。 c3js库看起来非常强大但是d3js中有一些功能目前在c3js中不可用，我打算在我的c3js代码中使用它。有没有人有任何使用d3js代码与c3js或使用内部d3js或c3js代码的经验。作为参考，我计划在c3js中构建的可视化中使用d3js中的click函数。

谢谢

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参考页

注意：如果您使用的是Angle 2+，则应使用箭头功能，而不要使用具有关键功能“功能”的功能

`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

2 个答案: