d3pie.js 中的条纹背景

Question

我们正在使用 d3pie[http://d3pie.org/#generator-result] d3 上的一个库来生成饼图，想知道如何用条纹替换其中的背景。

如果你查看URL、http://d3pie.org/#generator-result，你会发现d3pie目前只提供了三个与数据相关的属性，即标签、值和颜色，如下所示：

{
  "label": "Test",
  "value": 311,
  "color": "#d96d6d"
}

不确定如何将普通背景颜色更改为看起来像条纹。尝试了 Css 中的线性渐变，而不是颜色属性的六角形值，但这没有帮助。

Answer 1

您可以使用 SVG pattern 填充和 mask 来实现此目的：http://jsfiddle.net/henbox/wt45qfkz/2/

pattern 是从 this answer 借用到上一个问题。

使用以下方法将遮罩和图案应用于每个单独的饼图切片：

var arcs = vis.selectAll("g.slice")
  .data(pie).enter()
  .append("svg:g")
  .attr("class", "slice")
  .attr("style", "fill:url(#stripe);")
  .attr("style", "mask:url(#mask);");

然而，当您添加标签时，您可能运行会遇到麻烦：如果您将它放入同一个 g 元素中，条纹也会应用于文本

d3pie.js 中的条纹背景

Striped background in d3pie.js

javascript

d3.js

charts

pie-chart

d3pie.js