与 d3.js 反应原生的形状的模糊/阴影

Question

无法弄清楚如何使用 d3.js 和 ART 在 React-native 中为形状添加阴影。

所以基本上我需要blue 形状周围的阴影。
尝试添加具有黑色背景和小不透明度的新形状，但看起来有点奇怪。

这是我的代码 - [渲染圆条]

<Surface width={width} height={height}>
          <Group x={35} y={35}>
            <Shape fill="#c1defc" d={this.renderInnerLine()} />
            <Shape fill={color} d={arcLine({ endAngle: 2 * Math.PI * this.getPercent(percent) })} />
          </Group>
        </Surface>

渲染这个蓝色形状的简单函数

d3.shape
   .arc()
   .innerRadius(this.getInnerRadius(this.getOuterRadius(this.props.height)))
   .outerRadius(this.getOuterRadius(this.props.height))
   .cornerRadius(3)
   .startAngle(-0.05);

Answer 1

这是一种可能性：

var svg = d3.select("svg")
  .attr("width", 200).attr("height", 200)
  .append("g")
  .attr("transform", "translate(100,100)")

prepareShadows(svg);

// The base arc (blue-grey):
var baseArc = d3.arc()
  .innerRadius(50)
  .outerRadius(58)
  .cornerRadius(3)
  .startAngle(0)
  .endAngle(2 * 3.14);
svg.append("path")
  .attr("d", baseArc)
  .attr("fill", "#d3e8ff");

// The shadow:
var arcShadow = d3.arc()
  .innerRadius(50)
  .outerRadius(58)
  .cornerRadius(3)
  .startAngle(-0.05)
  .endAngle(0.76);
svg.append("path")
  .attr("d", arcShadow)
  .style("filter", "url(#drop-shadow)")
  .attr("fill", "#86f8e8")
  .style("opacity", 0.40);

// The blue arc:
var arc = d3.arc()
  .innerRadius(50)
  .outerRadius(58)
  .cornerRadius(3)
  .startAngle(-0.05)
  .endAngle(0.76);
svg.append("path")
  .attr("d", arc)
  .attr("fill", "#86f8e8");

// Inspired from http://bl.ocks.org/cpbotha/5200394
// To apply it to an element, it's then enough to add this style:
// .style("filter", "url(#drop-shadow)")
function prepareShadows(svg) {

  var defs = svg.append("defs");

  var filter = defs.append("filter")
    .attr("id", "drop-shadow")
    .attr("x", "-100%").attr("y", "-100%")
    .attr("width", "300%").attr("height", "300%");

  filter.append("feGaussianBlur")
    .attr("in", "SourceAlpha")
    .attr("stdDeviation", 4)
    .attr("result", "blur");

  filter.append("feOffset")
    .attr("in", "blur")
    .attr("dx", 0).attr("dy", 0)
    .attr("result", "offsetBlur");

  var feMerge = filter.append("feMerge");
  feMerge.append("feMergeNode").attr("in", "offsetBlur");
  feMerge.append("feMergeNode").attr("in", "SourceGraphic");
}

<svg></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>

---

为了 javascript/d3 的好处，可以将 react/template 部分减少到最低限度。

---

阴影创作灵感来自Charl P. Botha’s Block

它包括在要应用阴影的圆弧下方的圆弧形状的克隆（与圆弧相同的形状）上应用filter。

您可以使用以下属性来调整阴影：

• blur可以通过修改stdDeviation属性来调整
• 通过修改fill属性的颜色
• 不透明度通过修改opacity 属性。