15

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

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

4

4 回答 4

4

这有点骇人听闻，但我有同样的要求。我已经连接了一个 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

于 2014-01-07T14:52:39.987 回答
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);
            }
        });
于 2015-04-13T15:28:10.680 回答
0

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

http://www.highcharts.com/

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

于 2013-11-01T20:11:42.563 回答
-1 
$('#chart').on('click', 'svg rect' ,function() {
        x = $(this)[0].__data__.x; //The value of x
        y = $(this)[0].__data__.y; //The value of y
        });

久经考验；）

于 2017-02-15T10:31:26.347 回答