javascript - 访问 getTooltipText(e) 事件中的数据行?

标签 javascript html d3.js svg dimple.js

我使用以下图表:

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/

如何从 Tooltip 中的原始数据行获取数据,例如我需要获取 Date

最佳答案

如果您查看传递到回调中的对象e,就会发现有一个名为key 的属性,dimple 使用该属性来唯一标识每个点。考虑到这一点,您可以使用这个拼凑:

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 .

关于javascript - 访问 getTooltipText(e) 事件中的数据行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32887898/

相关文章:

ruby-on-rails-3.2 - 使用 D3 在 Rails 应用程序中显示 hello world

javascript - 如何使用 d3.js 将纬度和经度转换为 (x,y) 坐标

javascript - 使 CSS 通用以用于图像居中

javascript - 软键盘激活时网页向上滑动

html - 如何在不折叠边距的情况下调整我的 div 的位置?

html - table 不在中间 | HTML & CSS

javascript - 在 d3.js 中从 csv 创建树层次结构

javascript - 我怎样才能并且应该从不同的文件加载我的 .js 文件以保持清洁?

javascript - 将 <a> 插入由带有 javascript 或 jQuery 的插件生成的 div

html - 在 uber menu wordpress 中设置子菜单图像的样式