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/

为什么我看不到正确的结果，而是看到了错误的结果？问题出在哪里？

- klitsios

Answer 1

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

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）。因此，粉色矩形会通过这些白色圆看到。

所以如果你想不透过圆形看到背景，需要将圆形填充为黑色（“黑色像素下面的所有内容都不可见”），并且还要提供一个白色矩形掩蔽层来确保能够看到粉色矩形。

这是我在这里的第一个回答，如果您有任何更多的问题，请随时向我提问。

- soundquiet