D3图表绘制

Posted 2023-04-11

参考技术A 本节内容将描述饼状图、力导向图、弦图、集群图、树状图、打包图、分区图、圆形分区图、直方图、捆图、堆栈图、矩阵树图、地图的绘制过程，参考 D3.js入门系列

温馨提示：对于有D3基础的人，本节内容能够帮助其快速掌握各图表的绘制。若没有掌握基础知识，不建议直接学习本节内容。

对图表绘制的重点内容进行了总结，下述图表绘制步骤相似，总结如下：

布局内容总结：

转换后的数据：

弧生成器计算路径（svg的path）

绘制路径path，需要调用弧生成器

或者

绘制文本text，计算路径中心位置，放入文本值

转换后的数据：

然后，使力学作用生效：

绘制节点时，使节点拖动

力导向图布局force有一个事件tick，每进行到一个时刻，都要调用它，更新的内容就写在它的监听器里就好。

数据转换

转换后的数据：

首先绘制外部圆环，使用arc弧生成器

绘制path，使用数据为groups

绘制text,使用数据为groups。首先旋转适当角度，然后向上移动外半径个长度，135-225度范围的文字倒置

然后，绘制弦，使用chord生成器生成路径

绘制path,使用数据为chords

使用数据

转换后的数据：

首先，创建对角线生成器

绘制连线，使用生成器

然后绘制节点circle。

和集群图写法基本相同，使用布局不同。

转换后的数据与集群图相同。

数据格式与树状图相同，布局如下：

数据转换写法也类似。

转换后的数据：

然后分别绘制circle和text。

数据类型与集群图、树状图、打包图相同。用于表示包含与被包含关系的。布局如下：

value设定表示分区大小的值。这里的意思是：如果数据文件中用size值表示结点大小，那么这里可写成return d.size。

数据转换写法也类似。（nodes、links）

转换后的数据：

然后绘制rect和text。rect的width、height属性分别对应数据属性dx、dy。

与前面相同。

数据转换写法也类似。（nodes、links）

转换后的数据：

分别绘制path和text。

首先创建弧生成器。

绘制path使调用弧生成器。

绘制text时要进行一下转换：

数据转换

转换后的数据：

矩形rect、坐标轴line、刻度line、文字text。

需要使用集群图布局和捆图布局。

转换后的数据：

创建放射式的线段生成器：

首先绘制path，调用线段生成器:

接着创建g，在g中绘制circle和text

绘制g需要旋转、平移：

创建堆栈图布局

数据转换

转换后的数据：

分别绘制矩形rect、圆形circle、文字text、坐标轴axis，绘制过程与柱形图相似。

创建矩阵树图布局

数据转换

转换后的数据：

分别绘制矩形rect、文字text。

更多内容： Github个人博客
备注：本文发表于 https://cnyangkui.github.io/2017/11/15/d3-graphlist/

在 IPython 中使用 Pandas 绘制股票图表

【中文标题】在 IPython 中使用 Pandas 绘制股票图表

【英文标题】：Plotting a stock chart with Pandas in IPython

【发布时间】：2012-03-06 04:35:54

【问题描述】：

我刚刚开始使用 Python/Pandas，并将以下代码放在一起绘制标准普尔 500 指数。

from pandas.io.data import DataReader
# returns a DataFrame
sp500 = DataReader("^GSPC", "yahoo", start=datetime.datetime(1990, 1, 1))
sp500.plot(figsize = (12,8))

看起来这是在一张图表上绘制最高价、最低价、开盘价、收盘价、调整收盘价和成交量。有没有一种简单的方法可以在一个图表中仅绘制 adj 收盘价以及其下方的音量 like they do on Yahoo 和大多数其他金融网站？我也对绘制 OHLC 烛台图的示例感兴趣。

【问题讨论】：

DataReader 在 pandas 中不再存在。您必须安装 pandas_datareader 包才能继续使用它。

【参考方案1】：

请参阅here 了解我对类似问题的回答，了解here 了解有关 mathplotlib 财务烛台图的更多信息。

要从您的 sp500 中获取 adj 关闭，您可以使用类似 sp500["Adj Close"] 的内容，然后将其传递给相关的 matplotlib 绘图命令 plt.plot(datelist, sp500["Adj Close"] ) 其中 datelist 是您在 x 轴上的日期列表。

我相信您可以通过引用sp500.index 获取日期列表，请参阅here 了解更多信息。

至于您将其传递给 plot 命令的问题，类似于

datelist = [date2num(x) for x in sp500.index] 其中函数 date2num 来自 matplotlib.dates 包。

设置相关子图后，然后调用适当的填充命令到fill_between_alpha 线下的区域，就像你链接到的雅虎图一样。

请参阅 Fill Between and Alpha 标题下的 here 以获取另一个显示填充折线图的 sn-p，并打印正确的日期。

初始链接有一个示例 matplotlib sn-p，它还更详细地介绍了日期格式和格式。

【讨论】：

酷，感谢您提供的信息 :-) 你知道我如何从 sp500 数据框中获取日期列表吗？我还没有弄清楚。

我看到你建议我可以参考 sp500.index 来获取日期列表。我试过 plt.plot(sp500.index, sp500["adj clos"]) 但得到错误：错误：标记输入时发生意外错误以下回溯可能已损坏或无效错误消息是：（'EOF in multi -line 语句', (63, 0))

实际上，它看起来窒息的东西是 sp500["adj clos"]

好的，想通了。大写已关闭。 sp500["Adj Close"] 有效

【参考方案2】：

这将为您提供仅 Adj Close 列与 DataFrame 的索引（日期）的图。

from pandas.io.data import DataReader
sp500 = DataReader("^GSPC", "yahoo", start=datetime.datetime(1990, 1, 1)) 
close = sp500['Adj Close']
close.plot()
plt.show()

同样，您可以用同样的方式绘制体积：

vol = sp500['Volume']
vol.plot()
plt.show()