d3pie.js中的条纹背景

Striped background in d3pie.js

本文关键字：背景 js d3pie      更新时间：2023-09-26

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

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

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

不知道如何将普通背景颜色更改为条纹。尝试使用Css中的线性梯度，而不是颜色属性的六边形值，但这没有帮助。

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

相关文章：