美国硕士javascript D3（数据驱动型文档）课程辅导

美国硕士javascript D3(数据驱动型文档)课程是一个JavaScript库，用于根据数据操作文档。简称D3，D3可帮助同学使用 HTML、SVG 和 CSS 使数据栩栩如生。D3对Web标准的强调为学生提供了现代浏览器的全部功能，而无需将自己绑定到专有框架，将强大的可视化组件和数据驱动的DOM操作方法相结合。

D3 允许同学将任意数据绑定到文档对象模型 (DOM)，然后将数据驱动的转换应用于文档。例如，可以使用 D3 从数字数组生成 HTML 表。或者，使用相同的数据创建具有平滑过渡和交互的交互式 SVG 条形图。

D3不是一个单一的框架，试图提供所有可以想象的功能。相反，D3 解决了问题的症结所在：基于数据对文档进行有效操作。这避免了专有表示，并提供了非凡的灵活性，暴露了Web标准(如HTML，SVG和CSS)的全部功能。D3 具有最小的开销，速度极快，支持大型数据集以及用于交互和动画的动态行为。D3的功能风格允许通过各种官方和社区开发的模块集合重用代码。

　　美国硕士javascript 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", "blue", null);}

D3 采用声明性方法，对称为选择的任意节点集进行操作。例如，同学可以将上述循环重写为：

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

但是，同学仍然可以根据需要操作单个节点：

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

选择器由 W3C 选择器 API 定义，并由现代浏览器本机支持。上面的示例按标记名称 (分别和) 选择节点。可以使用各种谓词(包括包含、属性值、类和 ID)来选择元素。"p""body"

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

d3.selectAll("p")

.data([4, 8, 15, 16, 23, 42])

.style("font-size", function(d) { return d + "px"; });

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

　　#进入和退出：

使用 D3 的进入和退出选择，同学可以为传入数据创建新节点，并删除不再需要的传出节点。

当数据绑定到所选内容时，数据数组中的每个元素都将与所选内容中的相应节点配对。如果节点数少于数据数，则额外的数据元素将构成 Enter 选区，同学可以通过追加到选区来实例化该选区。例如：enter

d3.select("body")

.selectAll("p")

.data([4, 8, 15, 16, 23, 42])

.enter().append("p")

.text(function(d) { return "I’m number " + d + "!"; });

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

// 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对转换的关注自然延伸到动画过渡。过渡会随着时间的推移逐渐插值样式和属性。补间可以通过缓动函数(如“弹性”、“立方体进出”和“线性”)进行控制。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); });

通过仅修改实际更改的属性，D3 可减少开销，并在高帧速率下实现更高的图形复杂性。D3还允许通过事件对复杂转换进行排序。而且，同学仍然可以使用CSS3过渡;D3 不会替换浏览器的工具箱，而是以更易于使用的方式公开它。

上述就是关于美国硕士javascript D3(数据驱动型文档)课程辅导的一些相关内容了，针对这个方面，考而思在线的老师也是非常了解的，若是同学们有所需求的话吗，也可以通过我们右侧的微信来与我们的专业老师取得联系哦。