D3.js: Pfad an ein Rect anhängen

Question

Ich zeichne ein Diagramm in D3.js, und ich verwende ein <rect> als das eigentliche Diagrammgebiet (Linien, Diagramme, etc.). Es ist geplant, den Pfad nur so an die <rect> anzuhängen, dass die Diagrammzone beim Überfahren des Benutzers nicht überläuft. Im Moment sieht es wie folgt aus:

Aber wenn ich versucht zu tun:

var path = rect.append('path').attr(...) 

Der Weg selbst nicht einmal auftauchen. Die ursprüngliche Version ist nur Pfad zu svg anhängen, whic funktioniert:

var path = svg.append('path').attr(...) 

ich auch nicht overflow:hidden wie normale HTML-Elemente tun kann, weil path nicht im rect enthalten ist.

Wenn das Anhängen path an rect nicht möglich oder empfohlen ist, was ist der beste Weg, den "Aktivitätsbereich" des Pfades zu begrenzen, so dass es keinen Überlauf verursacht?

Answer 1

Der Grund, dass Sie nicht die path innerhalb der rect ist, weil SVG rect Elemente mit untergeordneten Elementen unterstützen nicht sehen können, sind sie nicht Container.

Was Sie tun müssen, ist ein g (Gruppe) -Element, das ein Container ist und legen Sie stattdessen Ihre rect und Ihre path drin. So funktioniert eine große Anzahl von D3 Beispielen, weil es bedeutet, dass Sie mit der Gruppe statt mit allen einzelnen Unterelementen interagieren können, was großartig ist, wenn Sie Dinge zoomen/bewegen.

In Ihrem Fall, wenn Sie nicht wollen, dass Ihre Linie außerhalb der rect sichtbar ist, dann können Sie diese Punkte einfach weglassen, oder sie abschneiden, sobald Sie sie mit einem Clip-Pfad gezeichnet haben.

Ich habe ein kleines Beispiel zur Veranschaulichung mit einem Clip-Pfad mit einem Rechteck, das Ihrem Anwendungsfall entspricht, zusammengestellt. Der blaue Strich zeigt den Bereich, der ohne einen Clip-Pfad gefüllt wäre. Sobald der Clip-Pfad angewendet wurde, können Sie jedoch sehen, dass der tatsächlich gefüllte Bereich viel kleiner ist als die vollständige Definition des Rechtecks.

.fill { 
 
    fill: steelblue; 
 
} 
 

 
.outline { 
 
    stroke: steelblue; 
 
    fill: none; 
 
}

<svg width="300" height="300"> 
 
    <defs> 
 
    <clipPath id="demoClip"> 
 
     <rect x="30" y="0" height="100" width="100"/> 
 
    </clipPath> 
 
    </defs> 
 
    
 
    <rect class="fill" x="0" y="0" width="200" height="200" clip-path="url(#demoClip)"/> 
 
    <rect class="outline" x="0" y="0" width="200" height="200"/> 
 
</svg>