NVD3 добавить границы/ход к гистограмме

Question

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

Можно ли добавить обводку в верхней части области немного сюжета, так это выглядит, как он имеет границу/удар?

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

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

Answer 1

Там нет границ, например в SVG, так что вы должны добавить прямоугольник, определяющий границу и назначить соответствующий стиль NVD3 не вариант для этого , но вы можете выбрать соответствующий элемент после того, как он b een draw и добавить новый контент.

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