1

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 个弧形图复制了 2 个大函数，drawTop并且drawBtm. 两者之间的唯一区别是数据数组 (good_jumps和bad_jumps)、容器 id 和上面的弧度逻辑，如果可以解决的话。有没有办法可以将这些组合成一个，这样我就不会重复逻辑？

我对 JS 很陌生，所以如果代码中有任何明显的错误，请告诉我 :) 此外，由于 json 来自外部 api，因此不可能更改它。

4

1 回答 1

2

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

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

关于第二个问题，这样做的一种方法是向您的数据添加另一个属性，该属性允许区分两种类型的弧，例如.good. 完成此操作后，您可以打开该属性的值来决定添加路径的类和 的范围radians，这是弧之间的唯一区别。

在这里完成 jsfiddle 。

于 2013-12-05T14:19:05.390 回答