用图表数据覆盖 D3 酒窝工具提示答案

【问题标题】：Override D3 Dimple tooltips with chart data用图表数据覆盖 D3 酒窝工具提示
【发布时间】：2014-08-15 21:46:00
【问题描述】：

我意识到这可能是我对 Dimple 系列的误解，但我不知道如何使用 getTooltipText() 用原始数据（即图表）中的值覆盖工具提示，而不仅仅是轴（即x,y,z)。

假设我有这样的数据：

var data = [{"project_id":"1114","project_status":"Active","request_date":"2014-05-31","project_type":"CRISPR","cost":"0","due_date":"2014-08-14","service_durations_days":"75","days_overdue":"1","active_services":""},...]

图表/轴/系列的初始化如下：

 var chart = new dimple.chart(svg, data);
 chart.addTimeAxis("x", "request_date","%Y-%m-%d","%Y-%m-%d");
 chart.addCategoryAxis("y", "project_type");
 var z = chart.addMeasureAxis("z", "cost");
 var s = chart.addSeries("project_status", dimple.plot.bubble);

我可以从这里调用任何东西吗：

s.getTooltipText = function(e){
  console.log(e);
  return ["test"];
}

这将返回 project_id、service_durations_days、days_overdue 或 active_services 以供显示？

【问题讨论】：

标签： javascript d3.js tooltip data-visualization dimple.js

【解决方案1】：

您可以将它们包含在您的系列定义中，这样它们就可以访问了。它们不能立即访问的原因是 Dimple 将数据聚合到绘制图表所需的级别，因此如果它不需要字段，它会忽略它。您可以在 addSeries 方法的第一个参数中包含额外的字段：

chart.addSeries([
    "project_id",
    "service_durations_days",
    "days_overdue",
    "active_services",
    "project_status"
], dimple.plot.bubble);

这是一个改编自 Greg Ross 的小提琴以展示这种替代方法：http://jsfiddle.net/6n5r6vyb/3/

【讨论】：