2016-11-14 50 views
0

尝试使用nvd3创建两个嵌套/堆叠戒指。我发现this线程,但似乎我不得不重新发明很多东西,以获得包含在nvd3模块中的动态功能。我正在尝试做一些像PieMix这样的外圈和内圈。看起来nvd3具有'旭日形状'配置。我如何使用nvd3(或sunburst配置)创建嵌套/堆叠环?我需要能够拥有像nvd3提供的动态数据加载等动态功能。角(1.5)nvd3嵌套甜甜圈戒指

这里是我的数据看起来像:

var outerRing = [{title: test1, color: '#0ff000', score: 3.2}, {title: test2, color: '#0fffff', score: 6.9}, {title: test3, color: '#00000', score: 7.9}] 
var innerRing = [{title: GOOD, score: 5}, {title: BAD, score: 95}] 

谢谢!

+0

你甚至设法让这个工作? – superphonic

+0

是使用CSS。基本上使用两组完全不同的数据和特征(即颜色,交互行为等)创建了两个环形图实例。制作一个比其他人小,并将其放置在更大的甜甜圈 - 所有CSS黑客入侵。 – user2994871

回答

0

您可以使用现有的指令来创建旭日形图,

<nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3> 

DEMO

编辑

目前nvd3没有嵌套甜甜圈图表。已经有相同的请求github page

如果你想建立你自己的指令/图表,你可以按照这个link

+0

是的,我知道nvd3指令中的'sunburst'选项。但是,似乎它可能是有限的,而不是我正在寻找的东西。我已经使用css实现了这个[link](http://g.recordit.co/ybe1XozyJo.gif),基本上是两个响铃,但正如你所看到的,当我调整浏览器的大小时,它会变得不对齐。我怎样才能使用'sunburst'选项来做同样的事情? – user2994871

+0

@ user2994871希望更新有帮助 – Sajeetharan