Question

我尝试启用右键单击图表上的数据点的功能。它似乎实现了这个功能，需要做两件事：

为右键单击添加一个监听器＆＃34;上下文菜单＆＃34;事件。我看了＃1952，他们为双击事件添加了一个监听器。我假设你会这样做。

一旦有了钩子，我就可以获得x和y坐标并覆盖自定义开发菜单。

问题：

这是最好的方法还是有更简单的方法？
有没有办法扩展c3而不是修改原始代码库。我看了一下https://github.com/c3js/c3/releases/tag/0.3.0并且我不清楚我会做什么。

我会做这样的事情：

c3.chart.internal.generateEventRectsForSingleX = (eventRectEnter) => {
               const $$ = this, d3 = $$.d3, config = $$.config;
               eventRectEnter.append("rect")
                   .attr("class", $$.classEvent.bind($$))
                   .style("cursor", config.data_selection_enabled && config.data_selection_grouped ? "pointer" : null)
                   .on('mouseover', function (d) {
                       ....
                   })
                   .on('mouseout', function (d) {
                      ....
                   })
                   .on('mousemove', function (d) {
                     ...
                   })
                   .on('click', function (d) {
                     ...
                   })
                   .on('contextmenu', function (d) {
                      < Add Logic for call back to render the menu >
                   })
                   .call(
                       config.data_selection_draggable && $$.drag ? (
                           d3.behavior.drag().origin(Object)
                               .on('drag', function () { $$.drag(d3.mouse(this)); })
                               .on('dragstart', function () { $$.dragstart(d3.mouse(this)); })
                               .on('dragend', function () { $$.dragend(); })
                       ) : function () {}
                   );
}

我也在打字稿中这样做，所以我遇到了第一行的问题，因为这些都没有在我的班级范围内定义，也不确定如何保留底层实现但是扩展它

const $$ = this, d3 = $$.d3, config = $$.config;

谢谢，德里克

Answer 1

不是改变c3代码本身，而是使用.onrendered钩子监听.c3-event-rect类中的事件可能更好：

onrendered: function () {
    d3.select("#chart").selectAll(".c3-event-rect")
    .on("contextmenu", function (d,i) {
        d3.event.preventDefault(); // prevent default menu
        var vals = chart.data().map (function (series) {
            var name = series.id;
                return {
                name: name, 
                value: chart.data.values(name)[d.x]}; // d.x is the index
            }
        );
        alert ("data: "+JSON.stringify(vals));
    })
  ;
}

将其添加到图表配置

http://jsfiddle.net/5x1nyqut/21/

更新了小提琴^^^，因为最新版本的c3有一个错误。这个小提琴引用了先前的c3（0.4.22）

的工作版本

如何添加更新c3图表以侦听右键单击鼠标事件？

1 个答案: