nvd3折线图自动设置填充不透明度

Question

我正在尝试使用以下代码

使用nvd3创建折线图

nv.addGraph(function ()
{
    chart = nv.models.lineChart()
        .x(function(d) { return d[0]; })
        .y(function(d) { return d[1]; })
        .showXAxis(true)
        .showYAxis(true)
        .useInteractiveGuideline(true);
    chart.xAxis     //Chart x-axis settings
        .axisLabel('Time (ms)')
        .tickFormat(function(d) {
            var format = '%H:%M';
            d = new Date(d);
            return d3.time.format(format)(d);
        }).tickValues(null);


    d3.select('#macCountGraph svg')
        .datum(graphData)
        .call(chart);

    nv.utils.windowResize(chart.update);
    return chart;
});

上面的代码是根据需要创建图表，但它正在填充图表，如下图所示

此外，它没有显示网格线，x轴，y轴，也没有显示工具提示。

我查看了生成的svg并发现了这个

<g class=" nv-group nv-series-0" style="stroke-opacity: 1; stroke-width: 1.5; fill: rgb(31, 119, 180); stroke: rgb(31, 119, 180); fill-opacity: 0.5;">

上述元素的填充不透明度设置为0.5。如果我在firebug中将其更改为0，则会删除填充颜色。

尝试使用javascript进行操作，如下所示

d3.selectAll("svg .nv-groups > nv-group")
  .transition()
  .style("fill-opacity", 0);

但没有运气。

关于如何解决这个问题的任何想法？

Answer 1

我d3 3.5.5 nvd3 1.8.1遇到了同样的问题。在数据中设置area 是有效的，因为它设置了图表区域，但与此处描述的问题分开（例如，如果设置area: "red"，您将结束两个填充区域）。

通过设置.nv-line类元素的样式进行修复。在你的情况下，试试这个：

d3.selectAll("svg .nv-line")
  .style("fill", "none"); // or whatever

Answer 2

有两种方法可以做到。

1. 在数据中添加area: false，然后传入图表

   var data = [{
       values: [],
       key: 'Time',
       color: '#7777ff',
       area: false //area - set to true if you want the area filled into the line chart.
   }];
   

2. 或者您可以使用以下代码。要对其进行测试，请打开调试器工具栏，粘贴页面控制台here上的代码。我已经对它进行了测试，但它确实有效。

   d3.select("svg g.nv-series-2").style("fill-opacity", 0);
   

希望它有所帮助。

Answer 3

y轴和x轴有两个参数来显示这些线：

＆＃13;

＆＃13;

.nvd3 .nv-axis path.domain {
    stroke-opacity: .75;
}

.nvd3 .nv-axis.nv-x path.domain {
    stroke-opacity: .75;
}

＆＃13;

＆＃13;

＆＃13;