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

如何解决d3js遮罩以在条形图上显示点

我在这里看到了这个示例：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','#F189b2');

这是我的CSS代码：

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

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

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

解决方法

解决方案： 只需将圆形颜色更改为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','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）。因此，通过这些白色圆圈可以看到粉红色的矩形。

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

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