CODEWITHSUNDEEP
javascriptcssd3.jssvg
itsok
itsok

Reputation: 45

Trying to incorporate svg circle within a d3 donut

I am trying to add a SVG circle within my d3 donut. My SVG circle displays the percentage as a fill of circle, for example, if the D3 donut is at 50%, the SVG will show 50% filled. I want to put the SVG circle within the inside of my D3 donut.

Here is my codepen for this. http://codepen.io/iamsok/pen/MwdPpx

class ProgressWheel {
  constructor(patient, steps, container){
    this._patient = patient;
    this._steps = steps;
    this.$container = $(container);

    var τ = 2 * Math.PI,
    width = this.$container.width(),
    height = this.$container.height(),
    innerRadius = Math.min(width,height)/4,
    //innerRadius = (outerRadius/4)*3,
    fontSize = (Math.min(width,height)/4);
    var tooltip = d3.select(".tooltip");
    var status = {
      haveNot: 0,
      taken: 1,
      ignored: 2
    }

    var daysProgress = patient.progress
    var percentComplete = Math.round(_.countBy(daysProgress)[status.taken] / daysProgress.length * 100); 

    var participation = 100;
    var color = ["#CCC", "#FDAD42", "#EFD8B5"];

    var pie = d3.layout.pie()
      .value(function(d) { return 1; })
      .sort(null);

    var arc = d3.svg.arc();

    var svg = d3.select(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(" +  width / 2 + "," + height / 2 + ")");

    var innerCircle = d3.select("svg")
      .append("svg")
      .attr("width", 250)
      .attr("height", 250);

    var grad = innerCircle.append("defs")
      .append("linearGradient").attr("id", "grad")
      .attr("x1", "0%").attr("x2", "0%").attr("y1", "100%").attr("y2", "0%");
      grad.append("stop").attr("offset", percentComplete + "%").style("stop-color", "lightblue");
      grad.append("stop").attr("offset", percentComplete + "%").style("stop-color", "white");

    innerCircle.append("circle")
     .attr("r", 40)
     .attr("cx", 70)
     .attr("cy", 70)
     .style("stroke", "black")
     .style("fill", "url(#grad)");

    var gs = svg.selectAll(".arc")
      .data(pie(daysProgress))
      .enter().append("g")
      .attr("class", "arc");

    var path = gs.append("path")
     .attr("fill", function(d, i) { return color[d.data]; })
     .attr("d", function(d, i, j) { return arc.innerRadius(innerRadius+(20*j)).outerRadius(innerRadius+20+(20*j))(d); })
     .attr("class", function(d, i, j) { if (i>=participation && j<1) return "passed" ; })

    svg.append("text")
      .attr("dy", "0.5em")
      .style("text-anchor", "middle")
      .attr("class", "inner-circle")
      .attr("fill", "#36454f")
      .text(Math.round(_.countBy(daysProgress)[status.taken] / daysProgress.length * 100) + "%");
}
}


    var patient = {progress: [0, 2, 2, 1, 0, 0, 0, 1, 1, 0, 1, 1, 2, 2]}

    var progressWheel = new ProgressWheel(patient, 14, '.chart-container' )

Upvotes: 0

Views: 448

Answers (1)

Yongzhi
Yongzhi

Reputation: 1070

Simply put the d3 donut and inner circle under the same svg so that they have the same coordinate system.

Check out here http://codepen.io/anon/pen/ojbQNE

Modified code is on codepen

Upvotes: 1

Related Questions