首页手记 D3官方网站首页介绍【译】

D3官方网站首页介绍【译】

标签：

Html5 JavaScript

D3.js 是一个基于数据来操作文档的的 Javascript 库。D3 帮助您使用 HTML,SVG 和 CSS 来使数据栩栩如生。D3 在 web 标准上的重点在于不用自己私有的框架就可以给与你现代浏览器完整的结合了强大的 DOM 操作可视化组件和数据驱动方式的功能。

最新版本（5.9.1）在这里下载：

D3.zip

复制下面这段内容来直接链接到最新发布的版本：

<script src="https://d3js.org/d3.v5.min.js"></script>

完整的资源和测试也可以在 Github 上下载。

简介

D3 允许您绑定任意数据到 DOM 对象上，并且然后应用数据驱动转换到文档上。例如，您可以用 D3 从一个数组生成一个 HTML 表格。或者用相同的数据创建栩栩如生的 SVG 柱状图。阅读更多的教程

D3不是一个单独力求提供所有可想到的功能的框架。相反，D3解决了问题的关键：基于数据高效的文档操作。这避免了专有的表示，并提供了非凡的灵活性，暴露了HTML，SVG和CSS等Web标准的全部功能。 D3 的开销极小，支持大型数据集和交互动画的动态行为。
D3 的函数式风格允许通过官方和各种社区开发的模块复用代码。

选择集

使用W3C DOM API修改文档非常繁琐：方法名称冗长，命令式方法需要手动迭代和临时状态缓存。例如，改变一个段落标签的字体颜色：

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i);
  paragraph.style.setProperty("color", "white", null);
}

D3采用声明式方法，运行在选中的任意节点上。例如，您可以将上面的循环重写为：

d3.selectAll("p").style("color", "white");

而且，您仍然可以根据需要操作单个节点：

d3.select("body").style("background-color", "black");

选择器由W3C Selectors API定义，并由现代浏览器原生支持。以上例子通过标签名称（p 和 body）获取节点。可以使用各种称谓来选择元素，比如属性，类名和 ID。

D3 提供了许多改变节点的方法：设置属性或样式、注册事件监听器、添加，删除或者排序节点、改变 HTML 或者文字内容。这些可以满足绝大多数的需求。直接访问 DOM 底层也是可能的，因为每一个 D3 选择集合都是简单的原生节点数组。

动态属性

熟悉其他DOM框架（如jQuery）的读者应立即认识到与 D3 的相似之处。样式，属性和其他属性可以指定为D3中的数据函数，不仅仅是简单的常数。尽管它们显而易见，但这些功能可以令人惊讶地强大;例如，d3.geoPath 函数将地理坐标投影到SVG路径数据中。D3提供了许多内置的可重用函数和函数工厂，例如面积图，线图和饼图的图形基元。

例如，给段落标签设置随机颜色：

d3.selectAll("p").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

为偶数和奇数节点交替灰度阴影：

d3.selectAll("p").style("color", function(d, i) {
  return i % 2 ? "#fff" : "#eee";
});

计算属性通常引用绑定数据。数据被指定为数值数组，并且每个值作为第一个参数（d）传递给选择函数。使用默认的join-by-index，数据数组中的第一个元素将传递给选择中的第一个节点，第二个元素传递给第二个节点，依此类推。例如，如果将数字数组绑定到段落元素，则可以使用这些数字来计算动态字体大小：

d3.selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

一旦数据绑定到文档，您可以省略数据运算符; D3将检索先前绑定的数据。这允许您在不重新绑定的情况下重新计算属性。

Enter and Exit

使用D3的 enter 和 exit ，您可以为传入数据创建新节点并删除不再需要的传出节点。

当数据被绑定到选择集中，在数据数组中的每一个元素与选择集中对应节点配对。如果节点数量少于数据，多余的 data 元素将会传入 enter 选择集, 您可以通过追加多余选择集来实例化。例如：

d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
    .text(function(d) { return "I’m number " + d + "!"; });

更新节点是默认选择 - 数据运算符的结果。因此，如果您忘记了进入和退出选择，您将自动选择仅存在相应数据的元素。常见的模式是将初始选择分为三个部分：要修改的更新节点，要添加的进入节点以及要删除的现有节点。

// Update…
var p = d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
    .text(function(d) { return d; });

// Enter…
p.enter().append("p")
    .text(function(d) { return d; });

// Exit…
p.exit().remove();

通过分别处理这三种情况，可以精确指定在哪些节点上运行哪些操作。这可以提高性能并提供对转换的更好控制。例如，使用条形图，您可以使用旧比例初始化输入条形，然后将输入条形转换为新比例以及更新和退出条形。

D3允许您根据数据转换文档;这包括创建和销毁元素。D3允许您更改现有文档以响应用户交互，动画随时间推移，甚至来自第三方的异步通知。甚至可以采用混合方法，其中文档最初在服务器上呈现，并通过D3在客户端上更新。

转换而非表现

D3没有引入新的视觉表现。与Processing或Protovis不同，D3的图形标记词汇直接来自Web标准：HTML，SVG和CSS。例如，您可以使用D3创建SVG元素，并使用外部样式表对其进行样式设置。您可以使用复合滤镜效果，虚线笔划和剪裁。如果浏览器厂商明天推出新功能，您将能够立即使用它们 - 无需更新工具包。而且，如果您决定将来使用 D3 以外的工具包，您可以随时使用你掌握的标准知识！

最重要的是，使用浏览器的内置元素检查器可以轻松调试D3：使用D3操作的节点正是浏览器本身可以理解的节点。

转换

D3对转换的关注自然延伸到动画转换。随着时间的推移，过渡会逐渐插入样式和属性。可以通过 easeing 函数来控制动画效果，例如“elastic”，“cubic-in-out”和“linear”。D3的插值器支持两种基元，例如字符串中嵌入的数字和数字（字体大小，路径数据等）和复合值。您甚至可以扩展D3的插补器注册表以支持复杂的属性和数据结构。

例如，要将页面背景淡化为黑色：

d3.select("body").transition()
    .style("background-color", "black");

或者，使用交错延迟调整符号映射中的圆圈：

d3.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });