结合d3.js和backbone.js

Posted 2023-02-22

【中文标题】结合d3.js和backbone.js

【英文标题】：Combining d3.js and backbone.js

【发布时间】：2013-06-17 10:18:40

【问题描述】：

我正在开发一个项目，它将所有 d3.js 可视化与backbone.js 结合到一个单页应用程序中。由于我有许多可视化，如条形图、饼图等，我想知道解决这个问题的最佳方法是什么。

例如，假设我有两个条形图和一个饼图。我应该把所有设置的边距、比例、所有图表的所有数据一起呈现在一个视图中吗？既然有两种不同类型的图，那么模型应该是什么？

View、Model、Controller、Collection 等应该怎么处理？

提前致谢，

【问题讨论】：

这很模糊。您必须更具体才能获得好的答案。

视图、模型、控制器和集合中的内容应该与任何其他单页应用程序没有任何不同。与d3、条形图、饼图等无关。

***.com/questions/17050921/…

一段有趣的视频专门讨论了与 2 结婚：youtube.com/watch?v=kqSc9YAZUi8

【参考方案1】：

我已经考虑过将 D3 和 Backbone 结合起来，并且有一些现有的解决方案：

Overview presentation

Short tutorial on combining Backbone & D3

Longer discussion on marrying Backbone and D3

A bunch of JS libraries for integrating with D3

我还在 GitHub 上找到了一个库，但似乎不支持...

最后，这些都没有让我真正满意，所以我开发了自己的 Backbone 模型、集合和视图。我设置：

ChartPoint 模型 - X & Y 坐标和点标签

ChartSeries Collection - 定义完整图表的 ChartPoints 集合

ChartBaseView - 解释上述数据、处理事件、绘制轴和其他通用功能的视图

BarChartView、LineChartView、PieChartView 等 - 用于呈现所需图表类型的特定视图。您的大部分 D3 代码都在此处。

并不是说这是“正确”的做法......只是我的方式。

【讨论】：

这听起来像是一个出色的高级抽象——您能否发布一个要点来展示模型的实现以及示例这些组件与其他组件之间交互的伪代码？