使用图表数据覆盖D3 Dimple工具提示

时间:2014-08-15 21:46:00

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

我意识到这可能是我对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进行显示吗?

1 个答案:

答案 0 :(得分:3)

您可以将它们包含在系列定义中,并且可以访问它们。它们无法立即访问的原因是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/