访问 getTooltipText(e) 事件中的数据行？

Question

我使用以下图表：

var data = [
                    { Date: "2015-09-14", DayOfMonth: 14, Type: "Views", Amount: 0, y1: 10, },
                    { Date: "2015-09-15", DayOfMonth: 15, Type: "Likes", Amount: 1, y1: 15, },
                    { Date: "2015-09-16", DayOfMonth: 16, Type: "Likes", Amount: 2, y1: 35, },
                    { Date: "2015-09-17", DayOfMonth: 17, Type: "Likes", Amount: 3, y1: 20, },
                    { Date: "2015-09-18", DayOfMonth: 18, Type: "Views", Amount: 4, y1: 22, },
                    { Date: "2015-09-19", DayOfMonth: 19, Type: "Views", Amount: 5, y1: 22, },
                    { Date: "2015-09-20", DayOfMonth: 20, Type: "Views", Amount: 6, y1: 22, },
         ];


var svg = dimple.newSvg("#chart", svgWidth, svgHeight);
var chart = new dimple.chart(svg, data);
var xAxis = chart.addCategoryAxis("x", "DayOfMonth");
xAxis.title = null;
xAxis.addOrderRule("Date");     
var yAxis = chart.addMeasureAxis("y", "Amount");
yAxis.title = null;

var series = chart.addSeries("Type", dimple.plot.area);
series.interpolation = "cardinal";      
series.getTooltipText = function(e) {
   // need access to Date here
};

在我的工具提示中，我需要该行的日期组件，但我只得到 DayOfMonth 和金额。

这是一个 JSFiddle：http://jsfiddle.net/93q8pewy/1/

如何从工具提示中的原始数据行中获取数据，例如，我需要获取Date?

Answer 1

如果您查看传递给回调的对象 e，会发现有一个名为 key 的属性，酒窝使用它来唯一标识每个点。考虑到这一点，您可以使用这个组合：

series.getTooltipText = function (e) {
    var rV = "";
    data.forEach(function(d){ //<-- loop data
       var u = d.Type + '_' + d.DayOfMonth + '___'; //<-- recreate key
       if (u === e.key){ //<-- does it match?
           rV = d.Date;
       }
    });
    return [rV]; //<-- show date in tooltip
};

已更新 fiddle。

访问 getTooltipText(e) 事件中的数据行？

Access data row in getTooltipText(e) event?

html

javascript

svg

d3.js

dimple.js