javascript - D3 瞄准/控制特定弧

Question

我正在尝试瞄准内部 donut 中的各个弧线。我希望能够控制每个弧(其中 14 个)并相应地更改它们的颜色。目前我想要两种颜色，灰色或柠檬绿。从本质上讲，这是一个为期 2 周的进度检查器。如果用户参与了 14 天中的 7 天，我希望它显示 7 绿色 7 灰色等。

这是我的代码笔。先感谢您。

    $(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代表没有参加。

这里是您修改后的 codepen(如果当天参与则显示绿色，否则显示灰色，中间显示总百分比):

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