1

私は試した：

var pattern = d3.select("#container").append("svg:pattern");
pattern.append("svg:defs") ... //and so on

しかし、でエラーが発生したappend("svg:pattern")ため、d3にはまだ実装されていないと思います。

私の解決策は、d3の外部でSVGコードを実行することでした。これは、この部分にd3の能力を必要としなかったため、正常に機能しました。（.data（dataset）をSVGオブジェクトにアタッチし、それをループして作成することもできたと思いましたが、それは理由もなくd3の多大な労力でした。）

これは健全性チェックの質問です。d3でsvgパターンを実装しようとして何かを見逃しましたか、それとも私の解決策は正しいアプローチでしたか？

（このような素晴らしいライブラリを提供してくれたMike Bostockに感謝します。）

4

3 に答える 3

3

この場合、すべての魔法は d3 ではなく svg にあります。SVGの基本を理解するには、SVG の記述に関するポケット ガイドを参照してください。

そして、ここに私の解決策があります：

var svg = d3.select("body").append("svg");

svg.append("defs").append("pattern")
    .attr('id','myPattern')
    .attr("width", 40)
    .attr("height", 25)
    .attr('patternUnits',"userSpaceOnUse")
    .append('path')
    .attr('fill','none')
    .attr('stroke','#335553')
    .attr('stroke-width','3') 
    .attr('d','M0,0 Q10,20  20,10 T 40,0' );


svg.append('rect').attr('x',10)
    .attr('y',0)
    .attr('width',500)
    .attr('height',200)
    .attr('fill','url(#myPattern)');

codepen で動作するこの例を見る

于 2015-06-16T10:47:03.690 に答える
2

D3 は多かれ少なかれ、あなたが何をしているのかにとらわれません。SVG や HTML など、何でも生成できます。SVG パターンが機能しない理由はありません。あなたが投稿した小さなコードから、パターンを HTML 要素に追加しようとしているように見えます。defsパターンの定義を開始する前に、SVG と要素を作成する必要があります。

于 2013-01-30T18:44:32.720 に答える
1

最初に defs 要素を SVG に追加してから、パターンを追加する必要があります。

//first create you SVG or select it
var svg = d3.select("#container").append("svg");

//then append the defs and the pattern
svg.append("defs").append("pattern")
    .attr("width", 5)
    .attr("height", 5);
于 2013-03-07T03:29:03.553 に答える