NVD3 добавить границу / ход в диаграмму площади

Question

У меня есть сложенная область диаграммы, как тот, по адресу: http://nvd3.org/ghpages/StackedArea.html

Возможно ли добавить ход в верхнюю часть области области сюжета, так что похоже, что у него есть граница / ход?

Я пытался добавить в инсульт с инспектором WebKit, но ничего не происходит (при условии, что это похоже на использование .style('stroke','#000000')

Так что, если бы была только одна серия на стекареареацеплект, и он был синим цветом, граница заставит ее выглядеть что-то подобное:

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, однако - вам просто нужна общая длина пути.

d3.select(".nv-area-" + (data.length-1))
    .style("stroke", "black")
    .style("stroke-opacity", 1)
    .style("stroke-dasharray", function() {
      return this.getTotalLength()/2 + "," + this.getTotalLength();
    });

.

Это выбирает последнюю (I.e. Top) области и устанавливает для него ход. Указанный dasharay означает, что будет инсульт для половины генеракодицетагкода (т.е. верхний), а затем ничего по длине пути (чтобы он появился, как будто в верхней части был только инсульт).

Проблема с этим и NVD3 - переход, который «растет» области. Если вы запустите этот код, когда график создан, длина строки может быть короче, чем то, что она будет в конце. Чтобы убедиться, что длина правильная, вам нужно (Re) запустить этот код после завершения перехода, например, Использование stroke-dasharray.

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

.