在D3中填充有背景图像的圆圈

Question

我想使用D3填充具有背景图像的圆圈。我尝试了不同的方法，但不使用它们会产生正确的结果。我正在通过这个问题上传我的要求

我有那个透明的图像，我试图将该图像设置为该圆圈的背景，这将正常工作，但我不知道如何填充该圆圈

我的代码

    var def = svg.append("defs")
           .append("pattern")
           .attr("id", "image")
           .attr("x", "0%")
                       .attr("y", "0%")
           .attr("height", "100%")
                       .attr("width", "100%")
           .attr("viewBox", "0 0 512 512")
           .append("image")
           .attr("x", "0%")
                       .attr("y", "0%")
           .attr("height", "512")
                       .attr("width", "512")
 .attr("xlink:href", "http://www.e-pint.com/epint.jpg");

 var grad = svg.append("defs").append("linearGradient").attr("id", "grad")
.attr("x1", "0%").attr("x2", "0%").attr("y1", "100%").attr("y2", "0%");
 grad.append("stop").attr("offset", "30%").style("stop-color", "red");
 grad.append("stop").attr("offset", "30%").style("stop-color", "white");

var tmpimgArcRad = inradius;

var arc3 = d3.svg.arc()
    .innerRadius(tmpimgArcRad)
    .outerRadius(0)
    .startAngle(0)
    .endAngle(2*Math.PI);
var background = svg.append("path")
    .attr("d", arc3)
   // .style("fill", "url(#image)")
    .style("fill", "url(#grad)")
    .style("stroke", "black")
    .style("stroke-width", "1");

这里我试图将该图像和linearGradient添加到同一个圆圈中，但这个逻辑不正确

所以请帮我解决任何其他逻辑

jsfiddle（在本例中我使用的是一个临时图像）

code