javascript - 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: "红色”，您最终将得到两个填充区域)。

通过设置 .nv-line 类元素的样式来修复。对于您的情况，请尝试以下操作:

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