d3js 掩码在条形图上显示点

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 but i see this one 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 掩码在条形图上显示点

d3js mask to show dots over bar chart

javascript

svg

design-patterns

mask

d3.js