nvd3 line chart not shown properly. (dots and shaded area)

问题

So I am using nvd3 and I want to show 2 lines in one line chart. I know the code is alright as I am trying it on the live code of nvd3 and it works fine. I read in many places though that the code they use on the nvd3 live code is not the same as the api.

So the graph is shaded and has dots. However in the live code of nvd3 there are no dots and no shaded area.

Thus is my code :

            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;
    });

So I would like to know why the shaded area and the dots. And why I dont get to see the axis,

Cheers

回答1:

Having the exact same issue on the shading. My solution is to just select all groups (the path elements are sorted into groups) and set fill: none right after i render the chart

This is my code

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;
    });


}

来源：https://stackoverflow.com/questions/25078620/nvd3-line-chart-not-shown-properly-dots-and-shaded-area