如何添加更新c3图表以侦听右键单击鼠标事件? [英] How to add update c3 charts to listen for a right click mouse event?

问题描述

我正在尝试启用右键单击图表上数据点的功能.似乎要实现此功能，需要发生两件事:

I'm trying to enable the ability to right click on a data point on the chart. It seems to implement this feature two things need to happen:

为右键单击甚至上下文菜单"事件添加一个侦听器.我查看了#1952，在其中他们为双击事件添加了一个侦听器.我假设您会这样做.

Add a listener for the right click even "context menu" event. l looked at #1952 where they added a listener for the double click event. I'm assuming that you would do that same.

一旦有了它，我就可以获取x和y坐标并覆盖自定义开发菜单.

Once there is a hook for it, I can then get the x and y coordinate and overlay a custom dev menu.

问题:

1. 这是最好的方法还是有更简单的方法?
2. 有没有一种方法可以扩展c3而不是修改原始代码库.我看了 https://github.com/c3js/c3/releases/tag/0.3.0 ，但目前尚不清楚我会怎么做.

1. Is this the best approach for this or is there any easier way?
2. Is there a way to extend c3 vs modifying the original code base. I took a look at https://github.com/c3js/c3/releases/tag/0.3.0 and it's not really clear what I would do.

我会做这样的事情吗?

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 () {}
                   );
}

;

我也在打字稿中执行此操作，因此第一行出现了问题，因为这些都没有在我的类的范围内定义，并且不确定我将如何保留底层实现，但对其进行扩展.

I'm also doing this in typescript so i'm having issue with the first line since none of these are defined in the scope of my class and not sure how I would keep the underlying implementation but extend it.

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

谢谢，德里克

推荐答案

与其更改c3代码本身，不如使用.onrendered钩子监听.c3-event-rect类上的事件，可能会更好:

Rather than change the c3 code itself, it's probably better to listen to events on the .c3-event-rect class using the .onrendered hook:

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图表以侦听右键单击鼠标事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！