模糊/阴影形状与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

这是一种可能性：

＆＃13;

＆＃13;

class Touch {
    var destination: AngularLocation
    var startingPoint: AngularLocation

＆＃13;

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");
}

＆＃13;

＆＃13;

＆＃13;

可以将反应/模板部分减少到最小，以利于javascript / d3。

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

它包括在弧形的克隆上应用<svg></svg> <script src="https://d3js.org/d3.v4.min.js"></script>（与弧相同的形状），就在应用阴影的弧下。

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

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