d3弧图 - 添加顶部半圆

Question

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很新，所以如果代码中有任何明显的错误，请告诉我:)此外，由于它来自外部api，因此无法改变json。< / p>

Answer 1

要使弧线显示在方框的顶部，您只需要更改radians比例的输出范围以覆盖上半部分：

radians.range([-Math.PI / 2, Math.PI / 2]);

关于第二个问题，一种方法是在数据中添加另一个属性，以便区分两种类型的弧，例如： .good。完成后，您可以打开该属性的值来确定添加路径的类和radians的范围，这是弧之间的唯一差异。

完成jsfiddle here。