Question

在stacked area chart显示模式下使用Stacked时，图表下方的阴影区域有时会被错误地绘制，如下图左侧所示。

这是使用d3 v3.4.9和nvd3 v1.1.15b

我们如何解决这个问题？

enter image description here

nv.addGraph(function() {
    var chart = nv.models.stackedAreaChart()
        .x(function(d) { return d[0] })
        .y(function(d) { return d[1] })
        .clipEdge(true)
        .useInteractiveGuideline(true)

    // Set chart width
    var chartWidth = $('#container').parent().actual('width');
    chart
        .width(chartWidth)
        .height(400)        


    chart.xAxis
        .showMaxMin(false)
        .tickFormat(function(d) { return d3.time.format('%m/%d %H:%M')(new Date(d)) });

    chart.yAxis
        .tickFormat(d3.format(',.2f'));

    d3.select('#chart svg')
        .datum(data)
        .transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

数据

[{"key":"Score","values":[[1404851066622,35048.28],[1404851056990,35013.30333333334],[1404850996972,34902.47833333333],[1404850946673,35121.545],[1404850894463,34645.958333333336],[1404850834461,34293.50666666667],[1404850774415,34601.14666666667],[1404850714562,33014.91],[1404850654380,30829.995],[1404850594599,30390.578333333335],[1404850534561,32050.178333333333],[1404850474360,33280.76666666667],[1404850414493,32893.621666666666],[1404850355040,32754.47333333333],[1404850294395,32505.896666666667],[1404850234542,33831.99],[1404850174345,34455.02166666667],[1404850114502,35197.685],[1404850054364,36244.27],[1404849994399,36644.72],[1404849934359,34769.32833333333],[1404849874915,34332.46],[1404849815570,34348.155],[1404849754514,33719.39666666667],[1404849694316,33380.74333333333],[1404849634585,32149.485],[1404849574348,33418.55333333334],[1404849514540,33734.78],[1404849454319,33462.948333333334],[1404849394462,33472.988333333335],[1404849334333,33082.255],[1404849274312,32760.763333333332],[1404849214328,32223.54],[1404849154428,32493.891666666666],[1404849094320,32358.06333333333],[1404849034570,32028.113333333335],[1404848974390,30633.98],[1404848914700,30057.855],[1404848854290,30481.873333333333],[1404848794735,29219.831666666665],[1404848734325,29813.93],[1404848674372,29433.351666666666],[1404848614293,29933.625],[1404848554320,29177.953333333335],[1404848494409,29655.998333333333],[1404848434569,28134.90166666667],[1404848374305,30559.645],[1404848314586,29577.385],[1404832106158,35272.24],[1404832098818,35384.67],[1404832038700,34561.48],[1404791087047,144.96333333333334],[1404791023663,162.095],[1404790979644,162.095],[1404790944266,166.78333333333333],[1404790862465,112.43833333333333],[1404790831029,58.655],[1404790788196,134.105],[1404790733381,89.70166666666667],[1404790686310,79.90833333333333],[1404790520081,50.153333333333336],[1404790459295,50.153333333333336],[1404790412459,33.02166666666667],[1404790339675,33.02166666666667],[1404790279374,33.02166666666667],[1404790219391,28.333333333333332],[1404790159536,8.333333333333334],[1404790099417,0.8333333333333334],[1404789019144,500],[1404788959529,1706.505],[1404788899106,2706.26],[1404788839206,5478.088333333333],[1404788779139,7494.89],[1404788719184,8775.81],[1404788659111,11631.443333333333],[1404788599159,12506.443333333333],[1404788539003,12631.443333333333],[1404788479088,12631.443333333333],[1404788418966,12464.776666666667],[1404788359107,10924.938333333334],[1404788299445,10133.516666666666],[1404788239022,7320.0216666666665],[1404788178920,5678.22],[1404788119132,3980.633333333333],[1404788058988,1416.6666666666667],[1404787999111,166.66666666666666],[1404775397197,845.1466666666666],[1404775337408,3818.6566666666668],[1404775277176,6835.751666666667],[1404775217281,9468.286666666667],[1404775157149,11809.166666666666],[1404775097293,15256.731666666667],[1404775037121,19209.423333333332],[1404774977218,23571.806666666667],[1404774917182,25729.676666666666],[1404774857180,28337.168333333335],[1404774797091,31102.07],[1404774737156,31190.953333333335],[1404774677068,33719.193333333336],[1404774617167,34048.79833333333]],"seriesIndex":0}]

Answer 1

这是一个更新的jsfiddle与更新的解决方案jsfiddle.net/t6WG6/3

var data = [{"key":"Score","values":[[1404851066622,35048.28],[1404851056990,35013.30333333334],[1404850996972,34902.47833333333],[1404850946673,35121.545],[1404850894463,34645.958333333336],[1404850834461,34293.50666666667],[1404850774415,34601.14666666667],[1404850714562,33014.91],[1404850654380,30829.995],[1404850594599,30390.578333333335],[1404850534561,32050.178333333333],[1404850474360,33280.76666666667],[1404850414493,32893.621666666666],[1404850355040,32754.47333333333],[1404850294395,32505.896666666667],[1404850234542,33831.99],[1404850174345,34455.02166666667],[1404850114502,35197.685],[1404850054364,36244.27],[1404849994399,36644.72],[1404849934359,34769.32833333333],[1404849874915,34332.46],[1404849815570,34348.155],[1404849754514,33719.39666666667],[1404849694316,33380.74333333333],[1404849634585,32149.485],[1404849574348,33418.55333333334],[1404849514540,33734.78],[1404849454319,33462.948333333334],[1404849394462,33472.988333333335],[1404849334333,33082.255],[1404849274312,32760.763333333332],[1404849214328,32223.54],[1404849154428,32493.891666666666],[1404849094320,32358.06333333333],[1404849034570,32028.113333333335],[1404848974390,30633.98],[1404848914700,30057.855],[1404848854290,30481.873333333333],[1404848794735,29219.831666666665],[1404848734325,29813.93],[1404848674372,29433.351666666666],[1404848614293,29933.625],[1404848554320,29177.953333333335],[1404848494409,29655.998333333333],[1404848434569,28134.90166666667],[1404848374305,30559.645],[1404848314586,29577.385],[1404832106158,35272.24],[1404832098818,35384.67],[1404832038700,34561.48],[1404791087047,144.96333333333334],[1404791023663,162.095],[1404790979644,162.095],[1404790944266,166.78333333333333],[1404790862465,112.43833333333333],[1404790831029,58.655],[1404790788196,134.105],[1404790733381,89.70166666666667],[1404790686310,79.90833333333333],[1404790520081,50.153333333333336],[1404790459295,50.153333333333336],[1404790412459,33.02166666666667],[1404790339675,33.02166666666667],[1404790279374,33.02166666666667],[1404790219391,28.333333333333332],[1404790159536,8.333333333333334],[1404790099417,0.8333333333333334],[1404789019144,500],[1404788959529,1706.505],[1404788899106,2706.26],[1404788839206,5478.088333333333],[1404788779139,7494.89],[1404788719184,8775.81],[1404788659111,11631.443333333333],[1404788599159,12506.443333333333],[1404788539003,12631.443333333333],[1404788479088,12631.443333333333],[1404788418966,12464.776666666667],[1404788359107,10924.938333333334],[1404788299445,10133.516666666666],[1404788239022,7320.0216666666665],[1404788178920,5678.22],[1404788119132,3980.633333333333],[1404788058988,1416.6666666666667],[1404787999111,166.66666666666666],[1404775397197,845.1466666666666],[1404775337408,3818.6566666666668],[1404775277176,6835.751666666667],[1404775217281,9468.286666666667],[1404775157149,11809.166666666666],[1404775097293,15256.731666666667],[1404775037121,19209.423333333332],[1404774977218,23571.806666666667],[1404774917182,25729.676666666666],[1404774857180,28337.168333333335],[1404774797091,31102.07],[1404774737156,31190.953333333335],[1404774677068,33719.193333333336],[1404774617167,34048.79833333333]],"seriesIndex":0}] 


drawChart = function() {

    nv.addGraph(function() {
        var chart = nv.models.stackedAreaChart()
            .x(function(d) { return d[0] })
            .y(function(d) { return d[1] })
            .clipEdge(true);

        chart
            .width(500)
            .height(400);


        chart.xAxis
            .showMaxMin(false)
            .tickFormat(function(d) { return d3.time.format('%m/%d %H:%M')(new Date(d)) });

        chart.yAxis
            .tickFormat(d3.format(',.2f'));

        d3.select('#chart svg')
            .datum(data)
            .transition().duration(500).call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });

}

drawChart();

使用NVD3时绘制的图表不正确

1 个答案: