工具提示 NVD3 AreaStackChart答案

【问题标题】：Tooltip NVD3 AreaStackChart工具提示 NVD3 AreaStackChart
【发布时间】：2014-09-08 03:18:40
【问题描述】：

如何根据键类型“已花费”、工具提示以及 yAxis 添加后缀“USD”？

我还希望视图默认只显示印象数，但是在点击其他图例时，假设我点击点击次数或安装次数或花费，图表上应该只有选定的图例数据可见。

数据：

[{"key":"Impressions","values":[[1405535400000,15132],[1405539000000,15216],[1405542600000,14385],[1405546200000,11291],[1405549800000,10798],[1405553400000,10460],[1405557000000,12787],[1405560600000,15948],[1405564200000,18891],[1405567800000,15536],[1405571400000,14793],[1405575000000,16771],[1405578600000,16441],[1405582200000,18943],[1405585800000,15560]]},{"key":"Clicks","values":[[1405535400000,137],[1405539000000,6],[1405542600000,13],[1405546200000,49],[1405549800000,33],[1405553400000,97],[1405557000000,50],[1405560600000,17],[1405564200000,181],[1405567800000,35],[1405571400000,107],[1405575000000,17],[1405578600000,7],[1405582200000,143],[1405585800000,96]]},{"key":"Installs","values":[[1405535400000,0],[1405539000000,0],[1405542600000,1],[1405546200000,3],[1405549800000,0],[1405553400000,7],[1405557000000,2],[1405560600000,0],[1405564200000,11],[1405567800000,2],[1405571400000,3],[1405575000000,1],[1405578600000,0],[1405582200000,9],[1405585800000,3]]},{"key":"Spent","values":[[1405535400000,0.01],[1405539000000,0.46],[1405542600000,0.22],[1405546200000,0.93],[1405549800000,0.17],[1405553400000,0.22],[1405557000000,0.8],[1405560600000,0.63],[1405564200000,0.34],[1405567800000,0.8],[1405571400000,0.07],[1405575000000,0.17],[1405578600000,0.43],[1405582200000,0.97],[1405585800000,0.19]]}]

代码：

function kMFormatter(num) {
if (num > 999) {
    if (num > 99999) {
        return d3.format(',.2f')(num / 100000) + ' M'
    }
    return d3.format(',.2f')(num / 1000) + ' K'
}
return num
}

function defaultChartConfig(container, data, useGuideline) {
    if (useGuideline === undefined) useGuideline = true;

if (typeof d3 !== 'undefined') {
    var colors = d3.scale.category20();
    keyColor = function (d, i) {
        return colors(d.key)
    };

    var chart;
    nv.addGraph(function () {
        chart = nv.models.stackedAreaChart()
            .useInteractiveGuideline(true)
            .x(function (d) {
                return d[0]
            })
            .y(function (d,key) {
                return d[1]
            })
            .color(keyColor)
            .transitionDuration(300)
            .showControls(false);



        chart.xAxis
            .tickFormat(function (d) {
                return d3.time.format('%X')(new Date(d))
            });

        chart.yAxis
            .tickFormat(function (d) {
                return kMFormatter(d);
            });


        d3.select('#' + container + ' svg')
            .datum(data)
            .transition().duration(1000)
            .call(chart)
            .each('start', function () {
                setTimeout(function () {
                    d3.selectAll('#d3_chart2 *').each(function () {
                        if (this.__transition__)
                            this.__transition__.duration = 1;
                    })
                }, 0)
            })

        nv.utils.windowResize(chart.update);

        return chart;
    });


   }
}

【问题讨论】：

要更改工具提示，请查看this answer
我可以操作核心 nvd3 库并完成工具提示功能。但我还不能做第二个功能。
你能把你的代码放在Fiddle，这样有人可以看看。
链接到代码jsfiddle.net/69AtH
NVD3图例的默认行为，当双击一个时，将所有其他系列设置为false，并启用双击系列。因此，在 dblclick 事件的图表上只会看到选定的图例数据。

标签： javascript d3.js nvd3.js

【解决方案1】：

正如我在评论above 中提到的，NVD3 图例的默认行为是，当双击一个时，将所有其他系列设置为 false，并启用双击系列。因此，您需要覆盖图例的 onclick 事件处理程序才能使第二个功能起作用：

        d3.selectAll('.nv-series').on('click', function(d,i) {
           dispatch.legendDblclick(d,i);
           data.forEach(function(series) {
               series.disabled = true;
            });
           d.disabled = false;
           dispatch.stateChange({
              disabled: data.map(function(d) { return !!d.disabled })
           });
           chart.update();               
        })

完整的例子是here

【讨论】：