人力车图表的 onClick 选项

Question

我想知道是否真的对数据点上的 onclick 事件提供了开箱即用的支持，或者我必须修改库以使其工作。我扫描了源代码的某些部分，但没有看到任何允许绑定自定义单击操作的内容。他们网站上的教程也没有显示此选项 (http://code.shutterstock.com/rickshaw/)。

任何帮助都是感激的。我目前正在 flot、rickshaw 和 flotr2 之间进行评估。到目前为止，它们都没有满足所有要求，我很惊讶除了 flot，在其他库中没有自定义 onClick 事件的选项。我看到有些人为 flotr2 添加了一些 hack-ish 方式，但它只针对条形图。

Answer 1

您尝试过 HighCharts.js 吗？它是一个用于创建交互式图表和图形的 javascript 库。

http://www.highcharts.com/

您可以自定义 onclick 事件以在使用 HighCharts 时调用 javascript 函数。

Answer 2

这有点小题大做，但我也有同样的要求。 我已经连接了一个 HoverDetail 对象，所以我连接到 HoverDetail 对象的 onShow 事件来存储所选项目的 x 标签的值。

（这是在一个角度应用程序中，所以这就是我在作用域上设置变量的原因）

var hoverDetail = new Rickshaw.Graph.HoverDetail({
    onShow: function(event){
        scope.data.activeDate = $(".x_label").text();
    },
    graph: graph
});

然后，我将普通的单击处理程序连接到图形，并访问了存储在其中的 onShow 处理程序的变量。

有关如何使用 HoverDetail 对象和其他 Rickshaw 构造的更多信息，请观看此截屏视频：http://tagtree.tv/d3-with-rickshaw-and-angular

Answer 3

我从 HoverDetail 派生了这个，到目前为止它似乎有效：

Rickshaw.namespace('Rickshaw.Graph.ClickDetail');
Rickshaw.Graph.ClickDetail = Rickshaw.Class.create({

    initialize: function (args) {
        this.graph = args.graph;
        this.clickHandler = args.clickHandler || function(data){};
        this.lastEvent = null;
        this._addListeners();
    },

    update: function (e) {

        e = e || this.lastEvent;
        if (!e) return;
        this.lastEvent = e;

        if (!e.target.nodeName.match(/^(path|svg|rect|circle)$/)) return;

        var graph = this.graph;

        var eventX = e.offsetX || e.layerX;
        var eventY = e.offsetY || e.layerY;

        var j = 0;
        var points = [];
        var nearestPoint;
        var nearestValue;

        this.graph.series.active().forEach(function (series) {

            var data = this.graph.stackedData[j++];

            if (!data.length)
                return;

            var domainX = graph.x.invert(eventX);

            var domainIndexScale = d3.scale.linear()
                .domain([data[0].x, data.slice(-1)[0].x])
                .range([0, data.length - 1]);

            var approximateIndex = Math.round(domainIndexScale(domainX));
            if (approximateIndex == data.length - 1) approximateIndex--;

            var dataIndex = Math.min(approximateIndex || 0, data.length - 1);

            for (var i = approximateIndex; i < data.length - 1;) {

                if (!data[i] || !data[i + 1]) break;

                if (data[i].x <= domainX && data[i + 1].x > domainX) {
                    dataIndex = Math.abs(domainX - data[i].x) < Math.abs(domainX - data[i + 1].x) ? i : i + 1;
                    break;
                }

                if (data[i + 1].x <= domainX) {
                    i++
                } else {
                    i--
                }
            }

            if (dataIndex < 0) dataIndex = 0;
            var value = data[dataIndex];
            var distance = Math.sqrt(
                Math.pow(Math.abs(graph.x(value.x) - eventX), 2) +
                Math.pow(Math.abs(graph.y(value.y + value.y0) - eventY), 2)
            );

            if (!nearestPoint || distance < nearestPoint.distance) {
                nearestValue = value;
            }
        }, this);
        if(nearestValue){
            this.clickHandler(nearestValue);
        }
    },

    render: function (args) {
        // Do nothing
    },

    _addListeners: function () {
        this.graph.element.addEventListener(
            'click',
            function (e) {
                this.update(e);
            }.bind(this),
            false
        );
    }
});

这样的用法：

 new Rickshaw.Graph.ClickDetail({
            graph: graph,
            clickHandler: function(value){
                alert(value.x + ' ' + value.y);
            }
        });

Answer 4

$('#chart').on('click', 'svg rect' ,function() {
        x = $(this)[0].__data__.x; //The value of x
        y = $(this)[0].__data__.y; //The value of y
        });

久经考验；）