极地图使用D3.js [英] Polar plots using D3.js

问题描述

有没有人知道使用

此功能使用 d3.svg.line.radial 。背景径向网格实现为线，圆和文本元素。一个小小的麻烦是代码需要弧度（对于d3.svg.line.radial）和度数（对于SVG的 transform attribute ）。我使用旋转的文本标签，因为这是很容易做SVG，但如果你不介意一个三角学定位文本标签，你可以使用非旋转标签。

仔细注意线的角度的定义：D3的径向线和区域从12点开始顺时针旋转，而这个曲线从3点开始逆时针旋转！

Does anyone know of good examples producing a polar plot using the D3 Javascript libraries?

I've seen some rose plots like this and this, but I'm really looking for something more similar to the Matlab polar plot:

Any examples would be greatly appreciated. Thanks!

解决方案

Sure, here you go:

The function is plotted using d3.svg.line.radial. The background radial grid is implemented as line, circle and text elements. One minor annoyance is that the code needs both radians (for d3.svg.line.radial) and degrees (for SVG’s transform attribute). I used rotated text labels because that was easy to do with SVG, but you could use non-rotated labels if you don’t mind a little trigonometry to position the text labels.

Note carefully the definition of the line’s angle: D3’s radial lines and areas proceed clockwise starting at 12 o’clock, while this plot proceeds counterclockwise starting at 3 o’clock!

这篇关于极地图使用D3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！