d3弧图 – 添加顶部半圆
http://jsfiddle.net/pRkpL/和http://fiddle.jshell.net/pRkpL/show/
我正在制作一个基于这个演示的弧形图: http : //bl.ocks.org/sjengle/5431779 。 我花了一段时间才到达这个阶段,现在图表以我需要的所有方式适应数据。
但是,我有两个问题:
1)我需要创建2个弧形图 – 一个在黑色矩形上方(代码中称为桶),下面一个。 作为临时修复,我使用css3 3D变换在x轴上翻转其中一个弧形图,但浏览器支持最多只是片状。 它确实有效,只在Chrome中运行,有时您必须刷新,打开开发工具,或调整小提琴框架的大小才能启动它。我想用d3正确地完成它。
我认为创建红色弧线的代码(圆圈的下半部分)是这样的:
var radians = d3.scale.linear() .range([Math.PI / 2, 3 * Math.PI / 2]);
我发现如果我删除了最后一个/ 2
它显示一个完整的圆圈,但我不能让它只显示我的drawTop
函数的上半部分。
2)我目前为2个圆弧图, drawTop
和drawBtm
复制了2个大函数。 两者之间的唯一区别是数据数组( good_jumps
和bad_jumps
),容器ID和上面的弧度逻辑,如果可以解决的话。 有没有办法将这些结合成一个所以我不是在重复逻辑?
我对JS很新,所以如果代码中有任何明显的错误,请告诉我:)另外,没有可能改变json,因为它来自外部api。
要使圆弧出现在方框的顶部,您只需要更改radians
范围的输出范围以覆盖上半部分:
radians.range([-Math.PI / 2, Math.PI / 2]);
关于第二个问题,一种方法是在数据中添加另一个属性,以便区分两种类型的弧,例如.good
。 完成后,您可以打开该属性的值来确定添加路径的类和radians
范围,这是弧之间的唯一差异。
在这里完成jsfiddle。