将折线图弯曲到弧形内 [英] Curving a line chart inside a curved arc

问题描述

我是D3的新手，正在学习它.我正在尝试构建曲线图.那就是我想将折线图弯曲到半圈内.如果有人可以告诉我如何在D3中解决此问题，将很有帮助.

I am new to D3 and learning it. I am trying to build a curved line chart. That is i want to bend the line chart inside a half circle. It will be helpful if any one can tell me how to approach this in D3.

以下链接中所示的内容: http://www.cs.toronto.edu/~jianzhao/snapshots/kronominer .jpg

Something as shown in the link below: http://www.cs.toronto.edu/~jianzhao/snapshots/kronominer.jpg

推荐答案

这与在笛卡尔坐标系中绘制折线图非常相似，但使用的是D3的径向线函数而不是规则线函数.您的线的x坐标变为角度，而y则坐标为径向距离.

This is very similar to drawing a line chart in Cartesian coordinates, but using D3's radial line function rather than the regular line function. Your line's x coordinate becomes the angle, and the y coordinate the radial distance.

var line = d3.svg.line.radial()
    .radius(function(d){return r(d.y);})
    .angle(function(d){return theta(d.x);});

此小提琴显示了一个带有示例数据的简单示例.

This Fiddle shows a simple example with sample data.

这篇关于将折线图弯曲到弧形内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！