NVD3 Hinzufügen eines Rahmens / Strichs zum Flächendiagramm

Question

Ich habe ein gestapeltes Flächendiagramm wie das bei : http://nvd3.org/ghpages/stackedArea.html

Ist es möglich, am oberen Rand des Bereichsbits des Diagramms einen Strich hinzuzufügen, damit es so aussieht, als hätte es einen Rand / Strich?

Ich habe versucht, mit dem Webkit-Inspektor einen Strich hinzuzufügen, aber es scheint nichts zu passieren (vorausgesetzt, dies ist wie bei der Verwendung von .style('stroke','#000000')

Wenn sich also nur eine Serie auf dem stackedAreaExample und diese blau wäre, würde sie durch den Rand ungefähr so aussehen:

Answer 1

In SVG gibt es keinen Rahmen als solchen, daher müssen Sie ein Rechteck hinzufügen, das den Rahmen bestimmt, und den entsprechenden Stil zuweisen.NVD3 hat dafür keine Option, aber Sie können das relevante Element nach dem Zeichnen auswählen und den neuen Inhalt hinzufügen.

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

Dies funktioniert für das gestapelte Flächendiagramm;bei anderen Diagrammtypen ist der Name der Klasse des auszuwählenden Elements unterschiedlich.

Das Festlegen eines Rahmens für den oberen Bereich ist schwieriger, da Sie mit SVG den Strich nicht nur für eine einzelne Seite von a festlegen können path.Sie können es mit tun stroke-dasharray sie benötigen jedoch nur die Gesamtlänge des Pfades.

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

Dies wählt die letzte (d.h.oben) und legt den Strich dafür fest.Das angegebene dasharray bedeutet, dass für die Hälfte des path (also.oben) und dann nichts für die Länge des Pfades (damit es so aussieht, als ob nur ein Strich oben wäre).

Das Problem bei diesem und NVD3 ist der Übergang, der die Bereiche "vergrößert".Wenn Sie diesen Code beim Erstellen des Diagramms ausführen, ist die Länge der Linie möglicherweise kürzer als am Ende.Um sicherzustellen, dass die Länge korrekt ist, müssten Sie diesen Code nach Abschluss des Übergangs (erneut) ausführen, z.wobei setTimeout.

Answer 2

Stattdessen können Sie einfach ein Leitungsdiagramm mit den gleichen Daten mit dunklerer Farbe ziehen, die wie ein Rand aussehen.

generasacodicetagpre.