工具提示NVD3 AreaStackChart

Question

如何根据工具提示以及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;
    });


   }
}

Answer 1

就像我在上面的评论中提到的那样，双击一个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();               
        })

完整的例子在这里