d3弧形图-添加顶部半圆

d3 arc diagram - add top semi circles

本文关键字：半圆 顶部 添加 d3      更新时间：2024-03-15

http://jsfiddle.net/pRkpL/和http://fiddle.jshell.net/pRkpL/show/

我正在制作一个弧形图，它主要基于这个演示：http://bl.ocks.org/sjengle/5431779.我花了一段时间才到达这个阶段，现在图形以我需要的所有方式适应数据。

然而，我有两个问题：

1） 我需要创建两个弧形图——一个在黑色矩形上方（代码中命名为bucket），另一个在下方。作为临时修复，我使用css33D转换将x轴上的一个弧形图翻转过来，但浏览器的支持充其量只是零散的。它确实有效，只在Chrome中有效，有时你必须刷新、打开开发工具或调整fiddle框架的大小才能启动。

我认为创建红色弧线（圆圈的下半部分）的代码是这样的：

var radians = d3.scale.linear()
                .range([Math.PI / 2, 3 * Math.PI / 2]);

我发现，如果我删除最后一个/ 2，它会显示一个完整的圆圈，但我不能让它在我的drawTop函数中只显示上半部分。

2） 我目前为两个弧形图复制了两个大函数，drawTop和drawBtm。两者之间唯一的区别是数据数组（good_jumps和bad_jumps）、容器id和上面的弧度逻辑（如果可以解决的话）。有没有一种方法可以把这些组合成一个，这样我就不会重复逻辑了？

我是JS的新手，所以如果代码中有任何明显的错误，请告诉我：）此外，由于json来自外部api，因此不可能更改它。

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

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

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

在这里完成jsfiddle。

相关文章：