NVD3在区域图表中添加边框/笔划

Question

我有一个堆积区域图表，如：http://nvd3.org/ghpages/stackedArea.html

是否可以在图表的区域顶部添加笔划，使其看起来像边框/笔划？

我尝试使用webkit检查器添加一个笔画但似乎没有任何事情发生（假设这就像使用.style('stroke','#000000')

因此，如果stackedAreaExample上只有一个系列，并且它是蓝色的，那么边框会使它看起来像这样：

Answer 1

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。

Answer 2

相反，您只需绘制一个具有相同数据的折线图，颜色较深，看起来像边框。

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