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

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

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

不确定如何将普通背景颜色更改为看起来像条纹。 尝试使用Css中的“线性渐变”代替“颜色属性”的“六边形”值,但这没有帮助。

#1楼 票数:2 已采纳

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

  ask by Anandaraja_Srinivasan translate from so

未解决问题?本站智能推荐:

1回复

d3pie.js格式化值显示

关于- d3pie.js (插件d3.js ) 假设我有一个对象的data数组,它们既具有label属性又具有value (数字类型)属性。 当前value按原样显示,我想以指定格式显示它- $2,000而不是2000等。 我试图添加另一个属性,除了label和value ,例如fo
1回复

使用d3pie.js饼图进行数据更新时出错

我正在尝试从d3pie.js库更新一个饼图,但是必须缺少一些基本的东西。 我有两个对我来说看起来相同的脚本,唯一的区别是更新是通过按下按钮进行的​​,而另一个是在页面加载时进行的。 我也遇到了第二个脚本Uncaught TypeError: Cannot read property 'va
1回复

d3pie在JSBin中工作,而不在浏览器中工作

我目前正在尝试在开始输入自己的数据/对其进行编辑之前,在浏览器上从d3pie运行示例代码。 当我将其粘贴到JS Bin(无论是在Firefox还是Chrome上)时,都可以正常工作。 代码如下所示: 但是,当我复制此代码并将其粘贴到HTML文件中并在Chrome或Firefox上运行该H
3回复

d3.js传播饼图的标签

我正在使用d3.js - 我这里有一个饼图。 但问题是切片很小时 - 标签重叠。 展开标签的最佳方式是什么? http://jsfiddle.net/BxLHd/16/ 这是标签的代码。 我很好奇 - 是否有可能用d3模拟一个三维饼图?
1回复

D3.js-获取弧内的随机点

如何尝试在现有弧内获得随机坐标? 我目前正在根据用户数据渲染一个饼图,并希望在每个弧上的随机位置渲染多个点 - 然而,它们可能在它们的弧之外目前,我正在使用每个弧形质心的随机偏差(在一定范围内)。 这种方法是有问题的,因为弧可能太小并且点最终在它们的弧之外。 我目前无法真正提供任何示例代码,因为到目
1回复

标签名称不会显示在d3.js的饼图转换图表中的输入数据中

我正在使用d3.js绘制饼图转换图表。 但是当标签放在数据数组中时,如下所示: 饼图不会显示。 而是打印“ NaN ”。 完整的代码粘贴在下面: 如何显示标签名称以及图表中的值?
1回复

D3.js:删除动态添加的饼图切片

我能够基于用户交互生成饼图并向其中动态添加数据。 这是小提琴http://jsfiddle.net/L5Q8r/ 我面临的问题是从饼图中删除数据时。 取消选中该复选框后,我将从“数据集”中删除数据并更新图表。 图表正在更新,但是用户仍可以看到以前的“饼图”。 我尝试添加“ .e
2回复

使用d3.js拼出多层饼图的效果

我有一个具有不同内半径的多层饼图,如下所示: 上面的饼图的代码可以在这里找到: http://jsfiddle.net/6e8aue0h/10/ 我想为该饼图添加分段功能。 像这样: 我尝试使用d3-pie插件,但是没有用。 当您将鼠标悬停在特定部分上时,它应该显示