nvd3折线图未正确显示。 （点和阴影区域）

Question

所以我使用的是nvd3，我希望在一个折线图中显示2行。我知道代码是正常的，因为我在nvd3的实时代码上尝试它并且它工作正常。虽然他在nvd3实时代码上使用的代码与api不同，但我在很多地方都读过。

因此图表有阴影并且有点。但是在nvd3的实时代码中没有任何点，也没有阴影区域。

这是我的代码：

            nv.addGraph(function() {
  var chart = nv.models.lineChart()
     .useInteractiveGuideline(true)
     .width(900)
     .height(600)
     .margin({
                left: 75,
                right: 50
            })          
            .showLegend(true)     
    .showYAxis(true)
    .showXAxis(true)
      .width(800)
      .height(900);
;



      chart.xAxis
.tickFormat(d3.format(',r'))
;

      chart.yAxis
.tickFormat(d3.format('.02f'))
;
//console.log(json);
      d3.select('#Average_Life svg')
            .datum([{"values":[{"x":0,"y":2042},{"x":173,"y":1922},{"x":347,"y":1873},{"x":526,"y":1907},
    {"x":700,"y":1883},{"x":931,"y":1854},{"x":1058,"y":1710},{"x":1220,"y":1473},{"x":1399,"y":1792},
    {"x":1584,"y":1869},{"x":1752,"y":2259},{"x":1983,"y":2288},{"x":2105,"y":2524},{"x":2284,"y":2770},
    {"x":2469,"y":2857},{"x":2637,"y":2698},{"x":2811,"y":2760},{"x":3042,"y":2596},{"x":3169,"y":2500},
    {"x":3331,"y":2408},{"x":3522,"y":2355},{"x":3690,"y":2500},{"x":3863,"y":2524},{"x":4095,"y":2447}],
    "key":"dd","color":"#34418f"},{"values":[{"x":0,"y":3753},{"x":173,"y":3609},{"x":347,"y":3464},
    {"x":526,"y":3315},{"x":700,"y":3170},{"x":931,"y":2977},{"x":1058,"y":2871},{"x":1220,"y":2736},
    {"x":1399,"y":2587},{"x":1584,"y":2433},{"x":1752,"y":2293},{"x":1983,"y":2100},{"x":2105,"y":1999},
    {"x":2284,"y":1849},{"x":2469,"y":1695},{"x":2637,"y":1555},{"x":2811,"y":1411},{"x":3042,"y":1218},
    {"x":3169,"y":1112},{"x":3331,"y":977},{"x":3522,"y":818},{"x":3690,"y":678},{"x":3863,"y":534},
    {"x":4095,"y":341}],"key":"ss","color":"#f9b800"}])
      .transition().duration(500)
            .call(chart);

        //Update the chart when window resizes.
        nv.utils.windowResize(function() {
            chart.update()
        });

        return chart;
    });

所以我想知道为什么阴影区域和点。为什么我不去看轴，

干杯

Answer 1

在阴影上有完全相同的问题。我的解决方案是只选择所有组（路径元素按组分组）并在渲染图表后立即设置fill: none

这是我的代码

function test(data) {

    /*These lines are all chart setup.  Pick and choose which chart features you want to utilize. */
    nv.addGraph(function () {
        var chart = nv.models.lineChart()
                .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
                .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                // .transitionDuration(350)  //how fast do you want the lines to transition?
                .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                .showYAxis(true)        //Show the y-axis
                .showXAxis(true)        //Show the x-axis
                ;

        chart.xAxis     //Chart x-axis settings
                .axisLabel('Time (sec)')
                .tickFormat(d3.format('.01f'));

        chart.yAxis     //Chart y-axis settings
                .axisLabel('Torque (NM)')
                .tickFormat(d3.format(',r'));

        d3.select('#chart')    //Select the <svg> element you want to render the chart in.   
                .datum(data)         //Populate the <svg> element with chart data...
                .call(chart);          //Finally, render the chart!

        d3.selectAll('g').style('fill', 'none');

        //Update the chart when window resizes.
        nv.utils.windowResize(function () {
            chart.update()
        });
        return chart;
    });


}