d3pie.js 中的条纹背景

Striped background in d3pie.js

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

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

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

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

您可以使用 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 元素中,条纹也会应用于文本