Javascript 当应用掩码时，d3（d3.SVG.arc）创建的SVG路径元素消失

我试图将纹理（例如条纹）放在由d3 arc函数创建的svg路径元素上。 我找到了这个示例（），这正是我想要的（使用css应用掩码），但是当我应用于由d3 arc函数创建的path元素时，路径消失了

我做了一个jsfiddle来说明这个问题。我使用了Mike Bostock的饼图示例（http://bl.ocks.org/mbostock/3887235），并应用了另一个示例中的掩码。 我试着把面具应用到饼图上（5-13岁的切片），但它没有显示出来。 我甚至认为svg path元素有问题，但是如果我在svg上创建一个显式路径（JSFIDLE上的蓝色矩形），掩码就可以工作了

有人知道为什么会这样吗？d3 arc功能中是否缺少任何配置？有什么我应该做而没有做的步骤吗？我真的很想使用css的掩码

应用遮罩的代码部分：

// selecting slice with population (4499890)
d3.select('#id_4499890').classed('hbar',true);

这项研究显示了问题所在

---

谢谢

您的遮罩是一个

矩形

占据y方向0到100%的空间，您的弧形

路径

虽然占据y方向-46到-125的空间，但两者完全不重叠

因此，只需从更负的角度开始您的rect：

defs.append("mask")
    .attr("id","mask-stripe")
    .append("rect")
    .attr("x","-200")
    .attr("y","-200")
    .attr("width","100%")
    .attr("height","100%")
    .attr("fill",'url(#pattern-stripe)');

更新

---

完整代码：

//添加模式
var defs=d3.选择（“svgPattern”）.追加（“defs”）；
定义附加（“模式”）
.attr（“id”，“图案条纹”）
.attr（“宽度”、“4”）
.attr（“高度”、“4”）
.attr（“patternUnits”、“userSpaceOnUse”）
.attr（“模式变换”、“旋转（45）”）
.append（“rect”）
.attr（“宽度”、“2”）
.attr（“高度”、“4”）
.attr（“转换”、“转换（0,0）”）
.attr（“填充”、“白色”）；
定义附加（“掩码”）
.attr（“id”、“遮罩条纹”）
.append（“rect”）
.attr（“x”、“-200”）
.attr（“y”、“-200”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.attr（“填充”，“url（#模式条带）”）；
函数绘图图（）{
var宽度=660，
高度=300，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.ordinal（）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
var arc=d3.svg.arc（）
.外层（半径-10）
.内半径（0）；
var labelArc=d3.svg.arc（）
.外层（半径-40）
.内半径（半径-40）；
var pie=d3.layout.pie（）
.sort（空）
.value（函数（d）{返回d.population；}）；
功能类型（d）{
d、 人口=+d.人口；
返回d；
}
var svg=d3。选择（“svgPattern”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var g=svg.selectAll（“.arc”）
.数据（pie（数据））
.enter（）.append（“g”）
.attr（“类”、“弧”）；
g、 附加（“路径”）
.attr（“d”，弧）
.attr（“id”，函数（d）{return'id_'+d.data.population；}）
.style（“fill”，函数（d）{返回颜色（d.data.age）；}）；
g、 附加（“文本”）
.attr（“transform”，函数（d）{return”translate（“+labelArc.centroid（d）+”）；}）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.data.age；}）；
//选择具有总体的切片（4499890）
d3.选择（“#id4499890”）.classed（'hbar'，true）；
}
风险值数据=[
{
“年龄”：“你的面具是一个
rect
占据y方向0到100%的空间，你的弧形
路径
虽然占据y方向-46到-125的空间，但两者根本不重叠

因此，只需从更负的角度开始您的rect：

defs.append("mask")
    .attr("id","mask-stripe")
    .append("rect")
    .attr("x","-200")
    .attr("y","-200")
    .attr("width","100%")
    .attr("height","100%")
    .attr("fill",'url(#pattern-stripe)');

更新


完整代码：


//添加模式
var defs=d3.选择（“svgPattern”）.追加（“defs”）；
定义附加（“模式”）
.attr（“id”，“图案条纹”）
.attr（“宽度”、“4”）
.attr（“高度”、“4”）
.attr（“patternUnits”、“userSpaceOnUse”）
.attr（“模式变换”、“旋转（45）”）
.append（“rect”）
.attr（“宽度”、“2”）
.attr（“高度”、“4”）
.attr（“转换”、“转换（0,0）”）
.attr（“填充”、“白色”）；
定义附加（“掩码”）
.attr（“id”、“遮罩条纹”）
.append（“rect”）
.attr（“x”、“-200”）
.attr（“y”、“-200”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.attr（“填充”，“url（#模式条带）”）；
函数绘图图（）{
var宽度=660，
高度=300，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.ordinal（）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
var arc=d3.svg.arc（）
.外层（半径-10）
.内半径（0）；
var labelArc=d3.svg.arc（）
.外层（半径-40）
.内半径（半径-40）；
var pie=d3.layout.pie（）
.sort（空）
.value（函数（d）{返回d.population；}）；
功能类型（d）{
d、 人口=+d.人口；
返回d；
}
var svg=d3。选择（“svgPattern”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var g=svg.selectAll（“.arc”）
.数据（pie（数据））
.enter（）.append（“g”）
.attr（“类”、“弧”）；
g、 附加（“路径”）
.attr（“d”，弧）
.attr（“id”，函数（d）{return'id_'+d.data.population；}）
.style（“fill”，函数（d）{返回颜色（d.data.age）；}）；
g、 附加（“文本”）
.attr（“transform”，函数（d）{return”translate（“+labelArc.centroid（d）+”）；}）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.data.age；}）；
//选择具有总体的切片（4499890）
d3.选择（“#id4499890”）.classed（'hbar'，true）；
}
风险值数据=[
{
“年龄”：