我有一个堆积面积图，如：http://nvd3.org/ghpages/stackedArea.html
是否可以在绘图区域的顶部添加笔触，使其看起来像有边框/笔触？
我尝试使用 webkit 检查器添加笔画，但似乎没有任何反应（假设这就像使用 .style('stroke','#000000')
因此，如果stackedAreaExample 上只有一个系列并且它是蓝色的，那么边框会使它看起来像这样：
【问题讨论】：
.nvd3.nv-stackedarea path.nv-area{stroke-opacity:1;}。但是，这也会在底部添加一个边框，这在堆叠区域图中看起来有点奇怪。
标签： d3.js nvd3.js stacked-area-chart
SVG 中没有边框，因此您必须添加一个矩形来确定边框并分配适当的样式。 NVD3没有这个选项，但是你可以在绘制完相关元素后选择它并添加新的内容。
d3.select(".nv-stackedWrap")
.append("rect")
.attr("width", chart.xAxis.scale().range()[1])
.attr("height", chart.yAxis.scale().range()[0])
.style("fill", "none")
.style("stroke", "black");
这适用于堆积面积图；对于其他类型的图表，要选择的元素的类名称会有所不同。
在顶部区域设置边框比较棘手，因为 SVG 不允许您仅为 path 的单边设置笔触。您可以使用 stroke-dasharray 来完成此操作 - 您只需要路径的总长度。
d3.select(".nv-area-" + (data.length-1))
.style("stroke", "black")
.style("stroke-opacity", 1)
.style("stroke-dasharray", function() {
return this.getTotalLength()/2 + "," + this.getTotalLength();
});
这将选择最后一个（即顶部）区域并为其设置笔画。指定的 dasharray 意味着将有一半 path （即顶部）的笔划，然后路径长度没有任何内容（使其看起来好像顶部只有一个笔划）。
这个和 NVD3 的问题是“增长”区域的过渡。如果在创建图表时运行此代码，则线的长度可能会比最终的长度短。为确保长度正确，您需要在转换完成后（重新）运行此代码，例如使用setTimeout。
【讨论】：
相反，您可以使用相同的数据绘制一个折线图，颜色较深，看起来像一个边框。
var areaFunc = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return d.index; })
.y0(THIS.height)
.y1(function(d) { return d.delay });
var lineFunc = d3.svg.line()
.x(function(d) { return d.index; })
.y(function(d) { return d.delay });
.......
svg.append("path")
.datum(myData)
.attr("class", "area")
.attr("d", areaFunc);
svg.append("path")
.datum(myData)
.attr("class", "line") // with a darker color
.attr("d", lineFunc);
【讨论】：