Javascript 使用图表数据替代D3酒窝工具提示
我意识到这可能是我对带有酒窝的系列的误解,但我不知道如何使用GetToolTiptText()用原始数据(即图表)中的值覆盖工具提示,而不仅仅是轴(即x、y、z) 假设我有这样的数据:Javascript 使用图表数据替代D3酒窝工具提示,javascript,d3.js,tooltip,data-visualization,dimple.js,Javascript,D3.js,Tooltip,Data Visualization,Dimple.js,我意识到这可能是我对带有酒窝的系列的误解,但我不知道如何使用GetToolTiptText()用原始数据(即图表)中的值覆盖工具提示,而不仅仅是轴(即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_du
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"];
}
这将返回要显示的项目id、服务持续时间、过期天数或活动服务。您可以将它们包含在序列定义中,并可以访问它们。无法立即访问它们的原因是,Dimple将数据聚合到绘制图表所需的级别,因此,如果不需要字段,它将忽略该字段。可以在addSeries方法的第一个参数中包含额外字段:
chart.addSeries([
"project_id",
"service_durations_days",
"days_overdue",
"active_services",
"project_status"
], dimple.plot.bubble);
这是一把从格雷格·罗斯(Greg Ross)的小提琴中修改出来的小提琴,展示了这种替代方法: