Question

我正在制作一个图表，通过某个产品的数量百分比填充圆圈，可用的产品总数几乎接近我只需要的问题，我无法弄清楚如何更改剩余部分甜甜圈弧。

我可以在此行中更改产品％的圆圈颜色

.attr("fill", "#F1F1F1");

，但剩下的是页面背景的相同颜色，我需要能够改变它的颜色。有什么想法吗？

Answer 1

以下是符合要求的代码段。

NULL

SELECT [Merchant Account], [DBA Name], [ECM Name], NULL AS [SCAN Due Date], [SAQ Due Date]
FROM Table1
UNION 
SELECT [Merchant Account], [DBA Name], [ECM Name], [SCAN Due Date], NULL AS [SAQ Due Date]
FROM Table2

var dataset = {
  hddrives: [90,10],
};

var width = 460,
    height = 300,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["#2DA7E2", "red"]);

var pie = d3.layout.pie()
    .sort(null);



var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 70);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

//Draw the Circle
 svg.append("circle")
                          .attr("cx", 0)
                          .attr("cy", 0)
                          .attr("r", 65)
                          .attr("fill", "#F1F1F1");

var path = svg.selectAll("path")
    .data(pie(dataset.hddrives))
      .enter().append("path")
     .attr("class", "arc")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);
svg.append("text")
      .attr("dy", "0em")
      .style("text-anchor", "middle")
      .attr("class", "inside")
      .text(function(d) { return '56%'; });
svg.append("text")
       .attr("dy", "1.5em")
      .style("text-anchor", "middle")
      .attr("class", "data")
      .text(function(d) { return '53GB / 123GB'; });

代码更改：

将色阶的范围更改为.inside { font-family: 'Roboto Condensed', sans-serif; font-size:30px; } .data { font-size:12px; color:grey; } .arc { stroke: #fff; } .

有了这个，<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.7/d3.min.js"></script>将根据.range(["#2DA7E2", "red"]);找到合适的颜色。（因为之前只有一种颜色，颜色正在重复）。
删除弧的不透明度，即删除以下行（因为这导致“遗留”部分的不透明度为0）
```
.attr("fill", function(d, i) { return color(i); })
```

希望这会有所帮助。：）

D3 dougnut图表定制圆圈颜色

1 个答案: