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是从上一个问题的答案中借用的。

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

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元素中，则条纹也将应用于文本