Question

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

任何帮助都是值得赞赏的。我目前正在评估flot，人力车和flotr2。到目前为止，它们都没有满足所有要求，我很惊讶除了flot之外，其他库中没有自定义onClick事件的选项。我看到有些人为flotr2添加了一些黑客方法，但它只对条形图非常具体。

Answer 1

这有点像黑客，但我有同样的要求。我已经连接了一个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 2

我是从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 3

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

http://www.highcharts.com/

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

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

尝试并测试;）

人力车图表的onClick选项

4 个答案: