如何使用图表数据更改 D3 酒窝工具提示？答案

【问题标题】：How to change D3 Dimple tooltips with chart data?如何使用图表数据更改 D3 酒窝工具提示？
【发布时间】：2017-02-03 08:48:21
【问题描述】：

我意识到这可能是我对 Dimple 系列的误解，但我不知道如何更改 D3 Dimple 工具提示？

假设我有这样的数据：

var data = [{"date":"01-02-2010","cost":"3796"},{"date":"01-03-2010","cost":"2699"},{"date":"01-04-2010","cost":"4588"}];

当移动到气泡时会显示工具提示

date:01-02-2010
cost:3796
cost:3.8k

但我想显示类似的工具提示

date:01-02-2010
cost:3796

我认为问题是

  y.tickFormat = ',.0f';    
  myChart.addColorAxis(ycord, ["green", "yellow", "red"]);

但我不知道如何修改工具提示

这里是 jsfiddle：http://jsfiddle.net/andrewarnier/Ra2xS/332/

有什么建议吗？非常感谢！

【问题讨论】：

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

【解决方案1】：

我将您的小提琴更新为您想要的输出。但我只想指出，我使用的是dimple v2.2.0版本。

Working jsfiddle

s.getTooltipText = function (e) {
            return [
                "date : " + e.cx + "",
                "value : " + e.cy + ""
            ];
        };

如您所见，您可以进行调整并将任何内容显示为工具提示。我希望这有帮助

【讨论】：

【解决方案2】：

Mahmut 的回答是正确的，因为您可以创建任何您喜欢的自定义工具提示，但是您也可以通过不同的方式从工具提示中移除额外成本。

Dimple 的默认工具提示逻辑非常简单。它从系列和每个连接的轴中检索值，并将它们全部包含在工具提示中。作为一个细微的改进，它检查工具提示中的任何行是否相同并删除重复项。在这里，您遇到了一个不寻常的情况，即颜色轴和 y 轴提供了相同的指标，但您对 y 应用了刻度格式，因此字符串不同。

解决方法是对颜色轴应用相同的刻度格式：

var c = myChart.addColorAxis(ycord, ["green", "yellow", "red"]); 
c.tickFormat = ',.0f';

这有点奇怪，但这意味着两个轴都报告匹配的字符串并删除了重复项。

【讨论】：