试图在 d3 甜甜圈中加入 svg 圆

Question

我正在尝试在我的 d3 甜甜圈中添加一个 SVG 圆圈。我的 SVG 圆圈将百分比显示为圆形填充，例如，如果 D3 甜甜圈为 50%，则 SVG 将显示 50% 填充。我想把 SVG 圆圈放在我的 D3 甜甜圈里面。

这是我的代码笔。 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' )

Answer 1

只需将d3 donut和inner circle放在同一个svg下，就可以拥有相同的坐标系了。

在这里查看http://codepen.io/anon/pen/ojbQNE

Modified code is on codepen