Question

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

如果您查看网址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的条纹的背景

1 个答案: