如何使用图表数据更改 D3 Dimple 工具提示？

Question

我意识到这可能是我对 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/

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

Answer 1

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

Working jsfiddle

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

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

Answer 2

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

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

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

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

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

如何使用图表数据更改 D3 Dimple 工具提示？

How to change D3 Dimple tooltips with chart data?

javascript

jquery

data-visualization

d3.js

dimple.js