D3.js 如何为D3条形图应用模式？

我试图将一种模式应用于D3条形图，但得到的结果是：

• 图表应该正好停在100000处
• 模式应该是“流动的”

我使用的绿色和红色图案定义如下：

var defs = this.svg.append("g:defs"); defs.append("g:pattern") .attr("id", "red-fill") .attr("patternUnits", "userSpaceOnUse") .attr("width", "85") .attr("height", "10") .append("g:image") .attr("xlink:href", "../10px-barchart-red.png") .attr("x", 0) .attr("y", 0) .attr("width", 85) .attr("height", 10); var defs = this.svg.append("g:defs"); defs.append("g:pattern") .attr("id", "green-fill") .attr("patternUnits", "userSpaceOnUse") .attr("width", "85") .attr("height", "10") .append("g:image") .attr("xlink:href", "../10px-barchart-green.png") .attr("x", 0) .attr("y", 0) .attr("width", 85) .attr("height", 10); var defs=this.svg.append（“g:defs”）； 定义追加（“g:模式”） .attr（“id”，“红色填充”） .attr（“patternUnits”、“userSpaceOnUse”） .attr（“宽度”、“85”） .attr（“高度”、“10”） .append（“g:image”） .attr（“xlink:href”，“./10px条形图red.png”） .attr（“x”，0） .attr（“y”，0） .attr（“宽度”，85） .attr（“高度”，10）； var defs=this.svg.append（“g:defs”）； 定义追加（“g:模式”） .attr（“id”，“绿色填充”） .attr（“patternUnits”、“userSpaceOnUse”） .attr（“宽度”、“85”） .attr（“高度”、“10”） .append（“g:image”） .attr（“xlink:href”，“./10px条形图绿色.png”） .attr（“x”，0） .attr（“y”，0） .attr（“宽度”，85） .attr（“高度”，10）； 该图由以下内容组成：

this.svg.selectAll("rect") .data(dataset, getKeys) .enter() .append("rect") .attr('class', 'bar') .attr("x", function(d, i) { return x(i) + 44; }) .attr("y", function(d, i) { return y(d.value); }) .attr("width", x.rangeBand()) .attr("height", function(d, i) { return height + padding - y(d.value); }) .attr("fill", function(d) { if (d.key == 0) { return "url(#green-fill)"; } else { return "url(#red-fill)"; } }) this.svg.selectAll（“rect”） .data（数据集、getKeys） .输入（） .append（“rect”） .attr（'class'，'bar'） .attr（“x”，函数（d，i）{ 返回x（i）+44； }) .attr（“y”，函数（d，i）{ 返回y（d值）； }) .attr（“宽度”，x.rangeBand（）） .attr（“高度”，函数（d，i）{ 返回高度+填充-y（d值）； }) .attr（“填充”，功能（d）{ 如果（d.key==0）{ 返回“url（#绿色填充）”； }否则{ 返回“url（#红色填充）”； } })

---

约翰·舒尔茨（John Schulz）的这一块成功地制作出了看起来非常棒的条形图（）

为了方便和永久性，复制了下面代码片段中的代码（还添加了一些动画，以显示它也能很好地转换）

var first=true；
setInterval（函数（）{
如果（第一）{
d3.选择（'.thing-2'）.transition（）
.延迟（500）
.持续时间（1000）
.attr（'height'，20）
.attr（'y'，80）
}否则{
d3.选择（'.thing-2'）.transition（）
.延迟（500）
.持续时间（1000）
.attr（'height'，100）
.attr（'y'，0）
}
第一个=！第一个；
}，2500）

SVG通过遮罩显示彩色图案
/*FF似乎需要明确的维度*/
svg{
宽度：500px；
高度：500px；
}
矩形hbar{
掩码：url（#掩码条带）
}
.事情-1{
填充：蓝色；
}
.第二件事{
填充：绿色；
}

看起来您用于“y”的刻度可能有问题。标尺是否输出d.value的预期位置？对于图案，您需要确保条形图与图像尺寸匹配，或者图像可平铺。D3对此无能为力。