Question

我想对我的情节上的所有点（而不是每个点）应用带有渐变的蒙版。该梯度应该从起点到最大值呈放射状变化。

下面是我的意思的示例，我想实现与以下内容完全相同的东西：

我试图像这样对所有圈子进行分组：

 this.svg.append("g").attr('class', 'items-container')
  .selectAll('circle')
  .data(this.data.suppliers)
  .enter()
  .append('circle')
  .attr(..) //added proper cx,cy,r so got circles in proper point

然后我尝试创建渐变：

var defs = this.svg.append('defs');

    var gradient = defs
      .append('linearGradient')
      .attr('id', 'svgGradient')
      .attr('x1', '0%')
      .attr('x2', '100%')
      .attr('y1', '0%')
      .attr('y2', '100%');

    gradient
      .append('stop')
      .attr('class', 'start')
      .attr('offset', '0%')
      .attr('stop-color', 'red')
      .attr('stop-opacity', 1);

    gradient
      .append('stop')
      .attr('class', 'end')
      .attr('offset', '100%')
      .attr('stop-color', 'blue')
      .attr('stop-opacity', 1);

并将其应用于组：

this.svg
  .select('.items-container')
  .style("fill","url(#svgGradient)")

但是它不起作用。你能帮我吗？

Answer 1

这似乎对我来说XY Problem。据我所知，您不需要<mask>或类似的东西。您所需要做的就是根据克拉值（从0到3）填充圆圈。

话虽这么说，并且由于您的颜色顺序可能是interpolateViridis，所以我建议您只使用顺序刻度...

const colorScale = d3.scaleSequential(d3.interpolateViridis)
    .domain([0, 3]);

...，然后根据克拉值（此处为x属性）填充圆圈：

circleSelection.style("fill", d => colorScale(d.x))

这是一个演示：

const svg = d3.select("svg");
const data = d3.range(120).map(function(d, i) {
  return {
    y: 14*d3.easeCubic(i/120) + (Math.random()*(6*i/120)),
    x: i / 40
  }
});
const yScale = d3.scaleLinear()
  .range([280, 20])
  .domain([0, 20]);
const xScale = d3.scaleLinear()
  .range([30, 480])
  .domain([0, 3]);
const colorScale = d3.scaleSequential(d3.interpolateViridis)
  .domain([0, 3]);
const circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 6)
  .attr("cx", d => xScale(d.x))
  .attr("cy", d => yScale(d.y))
  .style("stroke", "dimgray")
  .style("fill", d => colorScale(d.x));
svg.append("g")
  .attr("transform", "translate(30,0)")
  .call(d3.axisLeft(yScale))
svg.append("g")
  .attr("transform", "translate(0,280)")
  .call(d3.axisBottom(xScale))

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="500" height="300"></svg>

Answer 2

您可以反过来做：

使用渐变大小创建具有图表大小的矩形。
用圆创建一个蒙版，然后将此蒙版应用于矩形。如果您对圈子使用白色且填充不透明度<1，则应该可以完全显示效果。

更新：这是我的想法的说明

Answer 3

您只需要调整线性渐变的定义，以便在画布上而不是在每个对象上进行定义-就像

var gradient = defs
      .append('linearGradient')
      .attr('id', 'svgGradient')
      .attr('gradientUnits', 'userSpaceOnUse')
      .attr('x1', '100')
      .attr('x2', '600')
      .attr('y1', '100')
      .attr('y2', '600');

其中x1，x2等是图表区域的坐标

如何在点上应用渐变蒙版

3 个答案: