Question

我在这里看到了这个示例：https://jsfiddle.net/gruc1vod/4/

我想使用蒙版在条形图上添加这些点。

这是我的JavaScript代码：

var svg = d3.select("body").append("svg");
var dotsPatternDefs = svg.append('defs');
    
dotsPatternDefs.append('pattern')
        .attr('id', 'dotsPattern')
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('width', 10)
        .attr('height', 10)
      .append('circle')
        .attr('cx', 5)
        .attr('cy', 5)
        .attr('r', 3)
        .style('fill', 'white');
    
dotsPatternDefs.append('mask')
        .attr('id', 'mask-dots')
      .append('rect')
        .attr('width', '100%')
        .attr('height', '100%')
        .attr('x', 0)
        .attr('y', 0)
        .style('fill', 'url(#dotsPattern)');
    
svg.append('rect')
        .attr('class', 'dotsPattern')
      .attr('width', '200')
      .attr('height', '200')
      .attr('x', 0)
      .attr('y', 0)
        .style('fill', '#F189b2');

这是我的CSS代码：

rect.dotsPattern {
    mask: url(#mask-dots);
}

这是我的实时示例：https://jsfiddle.net/uao5yfhm/6/

问题出在哪里，我看不到这一结果correct outcome，但是我看到了这个wrong outcome？

Answer 1

解决方案：只需将圆形颜色更改为black，然后在蒙版中再添加一个白色矩形即可。

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

var dotsPatternDefs = svg.append('defs');
    
dotsPatternDefs.append('pattern')
        .attr('id', 'dotsPattern')
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('width', 10)
        .attr('height', 10)
      .append('circle')
        .attr('cx', 5)
        .attr('cy', 5)
        .attr('r', 3)
        .style('fill', 'black');
 
let mask = dotsPatternDefs.append('mask').attr('id', 'mask-dots')
mask.append('rect')
      .attr('width', '100%')
      .attr('height', '100%')
      .attr('x', 0)
      .attr('y', 0)
        .style('fill', 'white'); 
mask.append('rect')
      .attr('width', '100%')
      .attr('height', '100%')
      .attr('x', 0)
      .attr('y', 0)
        .style('fill', 'url(#dotsPattern)'); 

    
svg.append('rect')
    .attr('class', 'dotsPattern')
    .attr('width', '200')
    .attr('height', '200')
    .attr('x', 0)
    .attr('y', 0)
    .style('fill', '#F189b2');

rect.dotsPattern {
    mask: url(#mask-dots);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.1/d3.min.js"></script>

工作示例：https://jsfiddle.net/gspn7a3o/35/

我认为您误解了mask的用法。如果将图案圆圈填充为白色，则表示“可见白色像素下的所有内容”（请参见MDN）。因此，通过这些白色圆圈可以看到粉红色的矩形。

因此，如果您试图看不到圆圈，请将其置于黑色（“黑色像素下的所有内容均不可见”），并提供白色矩形遮罩以确保可以看到粉红色。

我在这里的第一个答案，问我是否还有其他问题。

d3js遮罩以在条形图上显示点

1 个答案: