D3.js：矩形へのパスを追加します

Question

私はD3.jsでグラフを描画していますが、私は実際のチャート領域（線、プロットなど）として<rect>を使用しています。ユーザーがドラッグしたときにグラフゾーンがオーバーフローしないように、パスは<rect>にのみ追加されます。今のところ、それは次のようになります。

しかし、私が何をしようとしたとき：

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

をパス自体にも表示されません。オリジナルバージョンは、ちょうどSVGへのパスを追加することであるwhicは動作します：

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

pathがrect内部に含有されていないので、私はまた、通常のHTML要素のようなoverflow:hiddenを行うことはできません。

path〜rectを追加できない場合は、オーバーフローが発生しないように、パスの「アクティビティ領域」を制限する最善の方法は何ですか？

Answer 1

rectの中にpathが表示されないのは、SVG rect要素が子要素をサポートしていないためです。これらはコンテナではありません。

あなたがする必要があるのは、コンテナであるg（グループ）要素を含める代わりに、rectとpathの両方をその内部に配置することです。これは、多数の個々のサブ要素の代わりにグループとやりとりすることができるという意味で、多数のD3の例がどのように機能するかを示しています。

rectの外に線が表示されないようにするには、最初にそれらの点の描画を省略するか、クリップパスを使用して描画した後にクリップするだけです。

私は、あなたのユースケースに一致する四角形のクリップパスを使って説明するための小さな例をまとめました。青い線は、クリップパスなしで塗りつぶされる領域を示しています。ただし、クリップパスが適用されると、実際の塗りつぶし領域が矩形の完全な定義よりはるかに小さいことがわかります。

.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>