Question

我试图在内甜甜圈中瞄准个别弧线。我希望能够控制每个弧（其中14个）并相应地改变它们的颜色。目前我想要2种颜色，灰色或浅绿色。基本上这是一个为期2周的进度检查器。如果用户参与14天中的7天，我希望它显示7绿色7灰色等。

这是我的codepen。先感谢您。

    $(function(){
    var tooltip = d3.select(".tooltip");
    var $container = $('.chart-container'),
        τ = 2 * Math.PI,
        width = $container.width(),
        height = $container.height(),
        innerRadius = Math.min(width,height)/4,
        //innerRadius = (outerRadius/4)*3,
        fontSize = (Math.min(width,height)/4);

var dataset = {
  days: [1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    progress: [1]

};

var participation = 100;    

var color = d3.scale.ordinal()
    .range(["#7EBA4A"]);



// Create the donut pie chart layout
  var pie = d3.layout.pie()
  .sort(null);

// Determine size of arcs
var arc = d3.svg.arc();

// Append SVG attributes and append g to the SVG
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(" +  width / 2 + "," + height / 2 + ")");


var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g").attr("class", "arc");

var path = gs.selectAll("path")
  .data(function(d) { return pie(d); })
  .enter().append("path")
  .attr("fill", function(d, i) { return color(i); })
  .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" ; })

// Append text to the inner circle
svg.append("text")
  .attr("dy", "0.5em")
  .style("text-anchor", "middle")
  .attr("class", "inner-circle")
  .attr("fill", "#36454f")
  .text(function(d) { return "100%"; });
});

http://codepen.io/pen/MwdPpx?editors=011

Answer 1

我稍微改变了你的数据格式以简化：

var daysProgress = [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

1表示参加的一天，0表示没有参加。

这里是您修改后的代码笔（如果日期分开则显示绿色，否则显示灰色，中心的总百分比）：

http://codepen.io/anon/pen/NqZPPx

D3针对特定弧进行定位/控制

1 个答案: