可视化库-D3.js
2014-09-08 18:47:32 
阿炯
D3.js（Data-Driven Documents）是最流行的可视化库之一，是一种用于创建动态、交互式数据可视化的JavaScript库，被很多其他的表格插件所使用。它允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。可以使用它用一个数组创建基本的HMTL表格，或是利用它的流体过度和交互，用相似的数据创建惊人的SVG条形图，在MIT协议下授权使用。它是数据可视化领域重要的 JavaScript 可视化库，其将强大的可视化交互技术与数据驱动 DOM 方法结合起来，可以充分使用现代浏览器的强大能力自由地对数据进行可视化，在学术界、专业团队中享有极大声誉。D3 与 G2 、Echarts 等不同，更加接近底层，直接操作 SVG 元素，拥有更大的自由度，几乎可以实现所有的 2D 设计需求，同时也带来了高学习曲线的成本。D3 长于可视化，但不止于可视化，还提供了数据处理、数据分析、DOM 操作等诸多功能。它通过使用HTML、CSS和SVG等Web标准，将数据与文档结合，使得数据可以以一种直观和易于理解的方式进行呈现；它赋予了开发者更大的自由度和灵活性，使得数据可视化可以根据需求进行定制和创新。
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
D3.js由美国斯坦福大学的一位计算机科学家Mike Bostock于2011年创造。它的设计目标是帮助开发者使用数据来操作文档对象模型（DOM）并创建数据可视化。D3.js的核心理念是将数据绑定到DOM元素上，并使用数据驱动的方式来更新元素的样式、位置和属性。
功能和特点
它提供了丰富的数据绑定机制，使得开发者可以轻松地将数据与DOM元素进行关联；
允许开发者使用JavaScript来操作DOM，从而实现动态的数据可视化效果；
还提供了丰富的可视化元素库，如图表、地图和网络图，使得开发者可以快速创建各种类型的数据可视化。
数据可视化
D3.js在数据可视化方面有着广泛的应用。通过它开发者可以创建各种类型的图表，如折线图、柱状图和饼图，以直观地呈现数据的分布和趋势。此外它还支持地图可视化，可以将数据绘制在地图上，展示地理位置相关的信息。另外D3.js还可以用于创建网络图，用于展示复杂的关系和连接。
更多示例请看这里。
一些关于D3.js的常见问答：
1. 如何开始学习D3.js？
可以从D3.js的官方网站获取详细的文档和教程，同时可以参考一些优秀的书籍和在线课程。
2. 如何解决常见的D3.js错误？
在使用D3.js过程中，可能会遇到一些错误。可以通过查阅文档、搜索论坛和咨询其他开发者来解决这些问题。
和Echarts的对比
ECharts和D3.js是两个常用的数据可视化库，它们都具有强大的功能和灵活性。下面是ECharts和D3.js的对比：
1.技术栈和语言
ECharts：是由百度开发的基于JavaScript的可视化库，它使用了Canvas和SVG技术来绘制图表。
D3.js：是一个基于JavaScript的数据驱动文档库，它使用了HTML、CSS和SVG来创建交互式的数据可视化。
2.功能和易用性
ECharts：提供了丰富的图表类型和交互功能，包括折线图、柱状图、饼图、地图等。它具有简单易用的API和配置项，使得开发者可以快速创建和定制图表。
D3.js：是一个非常灵活和强大的库，提供了丰富的数据操作和可视化功能。D3.js可以通过底层的API来创建自定义的图表和动画效果，但相对于ECharts，它的学习曲线较陡峭，需要更多的编码和理解。
3.社区支持和生态系统
ECharts：有一个活跃的社区和广泛的用户群体，它提供了详细的文档和示例，使得开发者可以轻松上手并解决问题。此外，ECharts还提供了在线编辑器和可视化设计工具，方便用户进行图表的定制和调试。
D3.js：也有一个庞大的社区和丰富的资源，但相对于ECharts，其学习和使用门槛较高。D3.js的社区提供了大量的示例和教程，但在解决问题时可能需要更多的自行研究和编码。
4.性能和扩展性
ECharts：在性能方面表现良好，它通过优化算法和渲染引擎来提高图表的渲染速度和交互性能。此外还提供了插件机制和扩展接口，使得开发者可以定制和扩展功能。
D3.js：具有很高的灵活性和可扩展性，可以满足各种复杂的可视化需求。但由于其底层的API和自定义性较高，需要开发者自行优化和处理性能问题。
综上所述，ECharts适合快速创建和定制常见的图表，对于非专业的开发者来说更易上手。而D3.js则适合需要更高度自定义和复杂交互的可视化需求，对于有较强编程能力的开发者来说更为适用。选择使用哪个库取决于具体的项目需求和开发者的技术水平。
面向中国用户的项目适合用echarts
面向中国用户的项目适合使用ECharts。它是由百度开发的可视化库，它在中国拥有广泛的用户群体和活跃的社区支持。ECharts提供了丰富的图表类型和交互功能，可以满足各种数据可视化的需求。同时还提供了中文文档和示例，方便中国用户学习和使用。另外ECharts还支持中文地图和中文标签的显示，可以更好地适应中国用户的需求。因此，如果你的项目面向中国用户，使用ECharts是一个不错的选择。
最新版本：7.07
已于2021年6月上旬正式发布。从该版本起，D3 以 ESM 形式提供，因此会要求使用环境安装了 Node.js 12 或更高版本。此外 d3.bin 现在会忽略空值，d3.ascending 和 d3.descending 也不再考虑空值的可比性(null comparable)。Ordinal scales 现在使用 InternMap 作为域。域的值通过 object.valueOf 强制转为原始值而不是通过 object.toString 强制转为字符串来实现唯一性。类数组(如 NodeList)在 d3.selectAll 和 selection .selectAll 中会被转换为数组。以上是 D3 v7 的一些破坏性变化，其它一些变化如下：
新增 d3.mode，d3.flatGroup 和 d3.flatRollup
新增 transition.selectChild，transition.selectChildren
为 Delaunay triangulation 采用 robust predicates
修复 delaunay.voronoi 计算出的船体共线点的外心
允许 brush.move 和 brush.clear 接受可选事件
允许 selection.merge 进行转化
允许 selection.join 进行转换
为 d3.contourDensity 应用 linear binning
以更好的圆形刻度值生成 contours.thresholds
修复 axis.tickArguments 以接受可迭代对象
修复 axis.tickValues 以接受可迭代对象
在 brush.move 期间修复未定义事件
在必要时，将拖动事件侦听器修复为显式非被动
在必要时，将缩放事件侦听器修复为显式非被动
修复 d3-zoom 中的变量初始化错误
暴露 d3.ZoomTransform 构造函数
更多详情查看发行说明。
官方主页：http://d3js.org/
项目主页：https://github.com/mbostock/d3/