javascript - 如何在点上应用渐变蒙版

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>