Javascript 用图案填充矩形

我正在使用d3.js作为图形。在某些时候，我必须用图形的某些特殊部分显示数据，例如，如果值跨越某个边界，则用填充模式显示该部分。更清晰的是在和图像

我得到了穿过边界的矩形部分，但是我如何用这种模式填充它呢？ 有css或画布技巧吗

---

注意：此图像只是一个示例，不是真实的图像。更改颜色很简单，只是一个有条件的

if

语句。以下是我以前使用过的一个示例：

svg.selectAll("dot")    
        .data(data)                                     
    .enter().append("circle")                               
        .attr("r", 3.5)     
        .style("fill", function(d) {            // <== Add these
            if (d.close >= 50) {return "red"}  // <== Add these
            else    { return "black" }          // <== Add these
        ;})                                     // <== Add these
        .attr("cx", function(d) { return x(d.date); })       
        .attr("cy", function(d) { return y(d.close); });    

这个怎么样：

JS

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

svg
  .append('defs')
  .append('pattern')
    .attr('id', 'diagonalHatch')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 4)
    .attr('height', 4)
  .append('path')
    .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
    .attr('stroke', '#000000')
    .attr('stroke-width', 1);

svg.append("rect")
      .attr("x", 0)
      .attr("width", 100)
      .attr("height", 100)
      .style("fill", 'yellow');

svg.append("rect")
    .attr("x", 0)
    .attr("width", 100)
    .attr("height", 100)
    .attr('fill', 'url(#diagonalHatch)');

结果

---

这里可能有重复，如果条件决定是哪个矩形，我使用图案填充该矩形，但该图案失去了它的原始颜色。我们可以同时保持填充色和透明图案吗？我使用图案填充矩形，但该图案失去了它的原始颜色。我们可以同时保持填充色和透明图案吗透明图案两者都有？我使用图案填充矩形，但此图案会丢失其原始颜色。我们可以同时保留填充颜色和透明图案吗？必须复制矩形（一个带有颜色，一个带有图案），因为不能在同一矩形上同时具有填充颜色和填充图案。您可以修改图案本身并在其中创建背景色，但这超出了我的知识范围。即使可以，也需要按颜色复制图案。

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

svg
  .append('defs')
  .append('pattern')
    .attr('id', 'diagonalHatch')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 4)
    .attr('height', 4)
  .append('path')
    .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
    .attr('stroke', '#000000')
    .attr('stroke-width', 1);

svg.append("rect")
      .attr("x", 0)
      .attr("width", 100)
      .attr("height", 100)
      .style("fill", 'yellow');

svg.append("rect")
    .attr("x", 0)
    .attr("width", 100)
    .attr("height", 100)
    .attr('fill', 'url(#diagonalHatch)');