D3.jsパターンが円弧またはドーナツグラフで機能しない

Question

イメージをドーナッツチャートに塗りつぶし、その中心からイメージを60度回転させようとしています。

私はこの方法でパターンとして単純な形状を塗りつぶして成功しましたが、パターンイメージはすべてねじれて、ドーナツチャートに適用されると繰り返します。イメージは300px x 300pxです。これはsvgと同じサイズです。 The final result should look like this。

Here's my fiddle。

私はなぜこれが正直に動作しますが、私は、パターン要素の幅と高さを変更し、patternUnits属性を削除したとき、私は目的の外観を達成することができました正確にはわからない

imgPath = "http://www.mikeespo.com/statDonkey/inner.png"; 
w = 300; 
h = 300; 

passingPercent = 60; 
rotateStartPosition = 50; 

var myScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]); 

// MAKES SVG 
var svg = d3.select("body") 
    .append("svg") 
    .attr("id", "svg_donut") 
    .attr("width", w) 
    .attr("height", h); 

// MAKE DEFS 
var defs = d3.select("#svg_donut") 
    .append("defs"); 

// MAKES PATTERN 
defs.append('pattern') 
    .attr('id', 'pic1') 
    .attr('width', 300) 
    .attr('height', 300) 
    .attr('patternUnits', 'userSpaceOnUse') 
    .append('svg:image') 
    .attr('xlink:href', imgPath) 
    .attr("width", 300) 
    .attr("height", 300) 
    .attr("transform", "rotate(60 150 150)") 
    .attr("x", 0) 
    .attr("y", 0); 

// CREATES VARIABLE *VIS* TO SVG 
var vis = d3.select("#svg_donut"); 

// DEFINES DONUT GRAPH 
var arc = d3.svg.arc() 
    .innerRadius(95) 
    .outerRadius(140) 
    .startAngle((myScale(0 + rotateStartPosition))) 
    .endAngle((myScale(passingPercent + rotateStartPosition))); 

// APPENDS *VIS* TO SVG 
vis.append("path") 
    .attr("id", "passing") 
    .attr("d", arc) 
    .attr("fill", "white") 
    .attr("transform", "translate(150,150)") 
    .attr("fill", "url(#pic1)"); 

Answer 1

：

defs.append('pattern') 
    .attr('id', 'pic1') 
    .attr('width', 1) 
    .attr('height', 1) 
    .append('svg:image') 
    .attr('xlink:href', imgPath) 
    .attr("width", 300) 
    .attr("height", 300) 
    .attr("transform", "rotate(00 150 150)") 
    .attr("x", 0) 
    .attr("y", 0); 

私はそれを完全に理解していませんが、それは座標系やパターンを適用するオブジェクトに合わせて調整する方法と関係があります。幅と高さは、最初に考えたようにイメージのサイズを定義するのではなく、パターンがドーナツの新しい座標系にマップされる方法です。 1の幅と高さは、パターンがドーナツの幅と高さにちょうど比例することを示します。

ここから私の情報を取得し、確かにまだ完全にはそれをすべて把握していないが、うまくいけば、これは役立ちます：応答、エヴァンのためhttps://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns