1

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

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

我尝试使用 webkit 检查器添加笔划，但似乎没有任何反应（假设这就像使用.style('stroke','#000000')

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

在此处输入图像描述

4

2 回答 2

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);
于 2014-12-15T12:02:32.707 回答
2

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.

于 2014-01-11T16:36:10.303 回答