Blur/Shadow for Shapes in react native with d3.js

Question

Can't figure it out how to add shadows to shapes in React-native with d3.js and ART.

So basically i need a shadow around blue shape.
Tried to add new one shape with black background and small opacity but it looks bit weird.

Here is my code - [ rendering circle bar ]

<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>

and simple function which rendering this blue shape

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

Answer 1

Here is a possiblity:

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>

---

The react/template part can be reduced to the minimum to the benefit of javascript/d3.

---

The shadow creation is inspired from Charl P. Botha’s Block

It consists in applying a filter on a clone of the arc shape (the same shape as the arc) just under the arc on which to apply the shadow.

You can play with the following attributes to adjust the shadow:

• the blur can be adjusted by modifying the stdDeviation attribute
• the color by modifying the fill attribute
• the opacity by modifying the opacity attribute.