用图案填充矩形

Question

我将 d3.js 用于图形。在某些时候，我必须用图形的某些特殊部分显示数据，例如，如果值越过某个边界，则用填充模式显示该部分。更清楚的是那里和图像。

我得到了跨越边界的矩形部分，但我怎样才能用这种模式填充它？ 有任何 CSS 或画布技巧吗？

注意：此图仅为示例，并非真实图片

Answer 1

这个怎么样：

Live Demo

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)');

结果

Answer 2

更改颜色很简单，只需一个有条件的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); });    

添加一个模式会有点复杂，因为您首先必须将 defs 元素添加到您的 SVG 中，然后再将您的模式添加到其中

//first create you SVG or select it
var svg = d3.select("#container").append("svg");

//then append the defs and the pattern
svg.append("defs").append("pattern")
    .attr("width", 5)
    .attr("height", 5);