D3.js是一个流行的JavaScript库，用于创建动态和交互式的数据可视化。通常情况下，我们会从外部文件中获取数据，例如CSV文件或JSON文件。但是，在某些情况下，这可能不是最好的选择。本文将介绍如何使用D3.js从JavaScript数组中获取数据，并通过示例代码演示如何实现。
为什么从数组中获取数据？
在一些情况下，从数组中获取数据可能更方便和灵活。例如：
- 数据量较小：如果数据量较小，则将其存储在内存中更加合适。
- 实时更新：如果数据源经常更新，则从数组中获取数据可以更轻松地实现实时数据更新。
- 不需要访问外部文件：从数组中获取数据可以避免服务器请求和网络延迟。
如何使用D3.js从数组中获取数据
D3.js提供了几个方法来从数组中获取数据。以下是其中的两个方法：
d3.range()
d3.range()方法可以生成一系列连续的数字。例如，以下代码将生成一个包含5个数字的数组：[0, 1, 2, 3, 4]。
var data = d3.range(5);
可以将这个数组传递给其他D3.js方法来创建图表，例如：
var svg = d3.select("svg");
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return d * 50 + 25; })
.attr("cy", 50)
.attr("r", 20);这将创建一个包含5个圆形的SVG图表，每个圆形之间距离为50个像素。
d3.zip()
d3.zip()方法可以将多个数组合并成一个数组。例如，以下代码将两个数组合并成一个：
var data1 = [1, 2, 3]; var data2 = ["a", "b", "c"]; var data = d3.zip(data1, data2); // data 现在是 [[1, "a"], [2, "b"], [3, "c"]]
可以将这个数组传递给其他D3.js方法来创建图表，例如：
-- -------------------- ---- ------- --- --- - ----------------- --- ------- - ----------------------- ----------- -------- ----------------- ----------- ----------- - ------ ---- - -- - --- -- ----------- --- ---------- --- ------------- ----------- - ------ ----- ---
这将创建一个包含3个圆形的SVG图表，每个圆形的颜色由第二个数组决定。
总结
本文介绍了如何使用D3.js从JavaScript数组中获取数据。通过使用d3.range()和d3.zip()方法，我们可以轻松地生成和组合数据，并创建各种类型的图表。此外，从数组中获取数据可以避免服务器请求和网络延迟，并支持实时数据更新。
如果您对D3.js感兴趣，请查阅官方文档以获取更多信息和示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27553