Adding gradient to 3rd party solid color donut chart

I wanted to create a gradient fill for this third party donut chart:

This is the js fiddle link:jsfiddle.net/kjoh57mf/

or refer to this:

JS:

var τ = 2 * Math.PI,
      width = 100,
      height = 100,
      outerRadius = Math.min(width, height) / 2,
      innerRadius = (outerRadius / 5) * 4,
      fontSize = (Math.min(width, height) / 4);

    var arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .cornerRadius(outerRadius - innerRadius)
      .startAngle(0);

    var svg = d3.select('.chart-container').append("svg")
      .attr("width", '100%')
      .attr("height", '100%')
      .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
      .attr('preserveAspectRatio', 'xMinYMin')
      .append("g")
      .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");

// Define the gradient
var gradient = svg.append("svg:defs")
    .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

// Define the gradient colors
gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#96d2a9")
    .attr("stop-opacity", 1);

gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "#34BDA4")
    .attr("stop-opacity", 1);    

    var text = svg.append("text")
      .text('0%')
      .attr("text-anchor", "middle")
      .style("font-size", fontSize + 'px')
      .attr("dy", fontSize / 3)
      .attr("dx", 2);

    var background = svg.append("path")
      .datum({
        endAngle: τ
      })
      .style("fill", "#7cc35f")
      .attr("d", arc);

    var midground = svg.append("path")
      .datum({
        endAngle: 0 * τ
      })
      .style("fill", "lightblue")
      .attr("d", arc);

    var foreground = svg.append("path")
      .datum({
        endAngle: 0 * τ
      })
      .style("fill", "#gradient")
      .attr("d", arc);

    midground.transition()
      .duration(750)
      .call(arcTween, 0 * τ);

    foreground.transition()
      .duration(750)
      .call(arcTween, 0.45 * τ);

    function arcTween(transition, newAngle) {

      transition.attrTween("d", function(d) {

        var interpolate = d3.interpolate(d.endAngle, newAngle);

        return function(t) {

          d.endAngle = interpolate(t);

          text.text(Math.round((d.endAngle / τ) * 100) + '%');

          return arc(d);
        };
      });
    }

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.chart-container {
  width: 50%;
  height: 50%;
  border: 1px dotted silver;
}
svg text {
  font-size: 1em;
  font-family: sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
   <body>
    <div class = "chart-container"> </div>
  </body >

The solution I tried:

I tried added with linear gradient and refer the fill with url:('#gradient'), but the graph just won't show up with gradient.

Here is the code I had tried that doesn't work as expected:

I added this

<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />     
    </linearGradient> 
</defs>

Coupling with: .style("fill", "#grad1"); and .attr('fill', 'url(#grad1)');

Open for any workaround and improvement.

Solution

Your main issue was with the way you assigned the gradient. You had:

.style("fill", "#gradient")

when it should have been:

.style("fill", "url(#gradient)")

var τ = 2 * Math.PI,
      width = 100,
      height = 100,
      outerRadius = Math.min(width, height) / 2,
      innerRadius = (outerRadius / 5) * 4,
      fontSize = (Math.min(width, height) / 4);

    var arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .cornerRadius(outerRadius - innerRadius)
      .startAngle(0);

    var svg = d3.select('.chart-container').append("svg")
      .attr("width", '100%')
      .attr("height", '100%')
      .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
      .attr('preserveAspectRatio', 'xMinYMin')
      .append("g")
      .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");

// Define the gradient
var gradient = svg.append("defs")
    .append("linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%");

// Define the gradient colors
gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "#96d2a9")
    .attr("stop-opacity", 1);

gradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#34BDA4")
    .attr("stop-opacity", 1);    

    var text = svg.append("text")
      .text('0%')
      .attr("text-anchor", "middle")
      .style("font-size", fontSize + 'px')
      .attr("dy", fontSize / 3)
      .attr("dx", 2);

    var background = svg.append("path")
      .datum({
        endAngle: τ
      })
      .style("fill", "#7cc35f")
      .attr("d", arc);

    var midground = svg.append("path")
      .datum({
        endAngle: 0 * τ
      })
      .style("fill", "lightblue")
      .attr("d", arc);

    var foreground = svg.append("path")
      .datum({
        endAngle: 0 * τ
      })
      .style("fill", "url(#gradient)")
      .attr("d", arc);

    midground.transition()
      .duration(750)
      .call(arcTween, 0 * τ);

    foreground.transition()
      .duration(750)
      .call(arcTween, 0.45 * τ);

    function arcTween(transition, newAngle) {

      transition.attrTween("d", function(d) {

        var interpolate = d3.interpolate(d.endAngle, newAngle);

        return function(t) {

          d.endAngle = interpolate(t);

          text.text(Math.round((d.endAngle / τ) * 100) + '%');

          return arc(d);
        };
      });
    }

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.chart-container {
  width: 50%;
  height: 50%;
  border: 1px dotted silver;
}
svg text {
  font-size: 1em;
  font-family: sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
   <body>
    <div class = "chart-container"> </div>
  </body >