FCC 4.数据可视化 4.1用 D3 实现数据可视化

最新推荐文章于 2024-05-03 18:08:38 发布

我准备好了我准备好了

最新推荐文章于 2024-05-03 18:08:38 发布

阅读量967

点赞数 1

分类专栏： FCC 文章标签： javascript d3.js

本文链接：https://blog.csdn.net/mosh44/article/details/113836824

版权

Introduction to the Data Visualization with D3 Challenges

D3.js，也叫 D3，表示数据驱动文档。 D3 是一个在浏览器里创建动态可视化数据的 JavaScript 库。它基于 web 标准，即 HTML、CSS 和 SVG 技术。

D3 获取输入数据并且映射到相应的可视化内容里。它支持不同的数据格式。D3 允许将数据绑定到 DOM 上。你可以使用 D3 的内建方法通过 HMTL 或者 SVG 元素实现数据可视化。

D3 提供了大量控制数据的方法。这一章主要包括 D3 库的一些基本功能以及如何使用 D3 库。

用 D3 实现数据可视化：用 D3 给文档添加元素

D3 有多种方法可以用来在文档中增加元素、修改元素。
select()方法用来从文档中选择元素，它以你查询的元素名称作为参数，返回第一个符合条件的 HTML 节点。以下是一个例子：

const anchor = d3.select("a");

上面这个例子找到页面上的第一个 a 标签（锚标签），将它作为一个 HTML 节点保存在变量anchor中。你也可以用其他的方法选择页面上的元素。例子中的 “d3” 是对 D3 对象的引用，可以通过它来访问 D3 的方法。
还可以用append()和text()方法。
append()方法以你想添加到文档中的元素作为参数，给选中的元素添加一个 HTML 节点，返回那个节点的句柄。
text()方法既可以给节点设置新的文本，也可以获取节点的当前文本。如果要设置文字内容，需要在圆括号中传入一个 string（字符串）类型的参数。
下面是一个选择无序列表、添加列表项和文字的例子：

d3.select("ul")
  .append("li")
  .text("Very important item");

在 D3 中可以使用英文句号将多个方法串联在一起执行多个操作。

使用select方法选择文本中的body标签。然后用append方法为它添加一个h1标签，同时在h1中添加文本 “Learning D3”。

<body>
<script>
// 在下面添加你的代码
d3.select("body")
.append("h1")
.text("Learning D3");
// 在上面添加你的代码
</script>
<body>

用 D3 实现数据可视化：用 D3 选择一组元素

selectAll()方法选择一组元素。它以 HTML 节点数组的形式返回该文本中所有匹配所输入字符串的对象。以下是一个选择文本中所有锚标签的例子：

const anchors = d3.selectAll("a");

像select()方法一样，selectAll()也支持链式调用，你可以在它之后调用其他方法。

选择所有的li标签，通过.text()方法将它的文本改为 “list item” 。

<body>
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
<script>
// 在下面添加你的代码
const anchors = d3.selectAll("li").text("list item");
// 在上面添加你的代码
</script>
<body>

用 D3 实现数据可视化：使用 D3 中的数据

D3 是数据驱动的库,可以使用 D3 的方法将数组形式的数据显示在页面上。
第一步是让 D3 知道数据。data方法选择连接着数据的 DOM 元素,数据集作为参数传递给该方法。
常见的方法是在文档中为数据集中的每一个数据创建一个元素，为此，你可以使用 D3 的enter()方法
当enter()和data()方法一起使用时，它把从页面中选择的元素和数据集中的元素作比较。如果页面中选择的元素较少则创建缺少的元素。
以下是一个选择ul元素并根据添加的数组创建新的列表项的例子。

<body>
  <ul></ul>
  <script>
    const dataset = ["a", "b", "c"];
    d3.select("ul").selectAll("li")
      .data(dataset)
      .enter()
      .append("li")
      .text("New item");
  </script>
<body>

选择不存在的 li 元素似乎有些难以理解。事实上，这段代码先选择页面上的 ul 元素，再选择所有的列表项——li，它将返回空。然后data()方法接收数组作为参数，并运行三次后面的代码，每次对应数组中的一个对象。enter()方法发现页面中没有 li 元素，但是需要 3 个（每个对应dataset中的一个对象）。它将在 ul 中添加带有文本 “New item” 的 li 元素。

选择body节点，然后选择所有的h2元素。让 D3 为dataset数组中的每一个对象创建并添加文本为 “New Title” 的h2标签。你应该使用data()和enter()方法。

<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
// 在下面添加你的代码
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
.text("New Title");
// 在上面添加你的代码
</script>
<body>

用 D3 实现数据可视化：使用 D3 中的动态数据

最后两个挑战涉及到使用 D3 的data()和enter()方法来动态展示数据。它们以数据集为参数，和append()方法一起使用，为数据集中的每一个元素对象创建一个 DOM 元素。
在之前的挑战中，你为dataset数组中的每一个对象创建了一个新的h2元素，但是它们的文本都是相同的 “New Title”。这是因为你还没有使用和每个h2元素关联的数据。
text()方法以字符串或者回调函数作为参数：

selection.text((d) => d)

上面这个例子中的参数d指关联数据集的一个对象。
以当前例子为例，第一个h2元素和 12 关联，第二个h2元素和 31 关联，第三个h2元素和 22 关联，以此类推。

改变text()方法使得每个h2元素显示dataset数组中的对应值加上一个空格和 “USD”。例如，第一个标题应该为 “12 USD”。

<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
// 在下面添加你的代码
// .text("New Title");
.text((d) => d +" USD");
// 在上面添加你的代码
</script>
<body>

用 D3 实现数据可视化：给元素添加内联样式

D3 可以使用style()方法为动态元素添加内联 CSS 样式表。
style()方法以用逗号分隔的键值对作为参数。这里是一个将选中文本的颜色设为蓝色的例子：

selection.style("color","blue");

在编辑器中添加style()方法，使所有显示的文本的font-family为verdana。

<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
.text((d) => (d + " USD"))
// 在下面添加你的代码
.style("font-family","verdana");
// 在上面添加你的代码
</script>
<body>

用 D3 实现数据可视化：根据数据更改样式

D3 是关于可视化和展示数据的。如果你期望基于数据来改变元素的样式，你可以在style()方法中使用回调函数为不同元素改变样式。
例如，你想将值小于 20 的数据点设置为蓝色，其余设置为红色。你可以在style()方法中使用包含条件逻辑的回调函数。回调函数以d作为参数来表示一个数据点：

selection.style("color", (d) => {
   
  /* 基于情况返回颜色属性的逻辑表达式 */
});

style()方法不仅仅可以设置color——它也适用于其他 CSS 属性。

在编辑器中添加style()方法，根据条件设置h2元素的color属性。写一个回调函数，如果值小于 20 返回 “red”，否则返回 “green”。
提示
你可以使用 if-else 语句或者三目操作符。

<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
.text((d) => (d + " USD"))
// 在下面添加你的代码
.style("color", (d) => {
   
/* 基于情况返回颜色属性的逻辑表达式 */
if(d<20) {
   return "red";}
else {
   return "green";}
});
// 在上面添加你的代码
</script>
<body>

用 D3 实现数据可视化：用 D3 添加 Class

即使对小型 app 来说在 HTML 元素中大量使用内联样式表也十分难以管理。更方便的是给元素添加遵守 CSS 规则的类。D3 中的attr()方法可以给元素添加任何 HTML 属性，包括类名称。
attr()方法和style()的使用方法一样。它以逗号分隔的键值对为参数使用回调函数。这里是一个给选中元素添加类名为 “container” 的例子：

selection.attr("class", "container");

在编辑器中添加attr()方法，给div元素添加类名bar。

<style>
.bar {
   
width: 25px;
height: 100px;
display: inline-block;
background-color: blue;
}
</style>

<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
// 在下面添加你的代码
.attr("class", "bar"); 
// 在上面添加你的代码
</script>
<body>

用 D3 实现数据可视化：动态更新元素的高度

之前的挑战包括如何从数组中显示数据和如何添加 CSS 类。将这些课程的内容结合起来只需两步你就能创建出一个简单的条形图：

为每一个数组中的数据点都创建一个div
为每个div动态分配高度值，在style()方法中使用回调函数将高度值设置为数据大小
回想使用回调函数设置样式的格式：

selection.style("cssProperty", (d) => d)

在编辑器中添加style()方法给每个元素设置height属性。
使用回调函数返回数据点的值加上字符串 “px”。

<style>
.bar {
   
width: 25px;
height: 100px;
display: inline-block;
background-color: blue;
}
</style>

<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
// 在下面添加你的代码
.style("height", (d) => d);
// 在上面添加你的代码
</script>
<body>

用 D3 实现数据可视化：更改条形图的显示方式

这里有一些格式的改变可以美化上个挑战中创建的条形图：

通过在 CSS 中为bar的类添加 margin 属性，为每一组之间添加空格以直观的将它们分开
通过给每个值乘以一个数来缩放高度，增加高度以更好地显示值的差异

首先，在style标签中为bar类添加 2px 的margin属性。然后，在style()方法中修改回调函数，使它返回 10 倍原数值的值（在后面加上 “px”）。
提示
通过给每一个数值点乘以相同的常量值仅仅改变比例。这就像放大，它不会改变底层数据的含义。

<style>
.bar {
   
width: 25px;
height: 100px;
/* 在下面添加你的代码 */
margin:2px;
/* 在上面添加你的代码 */
display: inline-block;
background-color: blue;
}
</style>

<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
// 在下面添加你的代码
.style("height", (d) => (d*10 + "px"))
// 在上面添加你的代码
</script>
<body>

用 D3 实现数据可视化：了解 D3 中的 SVG

SVG 是Scalable Vector Graphics的缩写。
“scalable” 的意思是如果放大或缩小一个对象，它不会像素化。不管是在小的移动手机屏幕上还是在大的电视显示器上它都会随着显示系统缩放。
SVG 用于制作常见的几何图形。由于 D3 将数据映射成可视化表达，它用 SVG 来创建可视化的图形。网页上的 SVG 图形必须在 HTML 的svg标签中。
当使用相对单位（例如vh、vw或者百分比）时，CSS 是可伸缩的。但是在实现数据可视化的时候 SVG 更加的灵活。

用append()给body加一个svg节点。分别使用attr()给这个svg一个width属性和一个height属性，并分别将它们设置为给定的常量w和给定的常量h。你可以在输出中看见它，因为在style标签中它的background-color设置为 pink。
提示
width和height属性没有单位，它们是来定义缩放的。但无论怎么缩放，这个svg元素的宽高比永远是 5:1 。

<style>
svg {
   
background-color: pink;
}
</style>

<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
// 在下面添加你的代码
.append("svg")
.attr("width",w)
.attr("height",h) 
// 在上面添加你的代码
</script>
<body>

用 D3 实现数据可视化：用 SVG 显示形状

上个挑战用给定的宽和高创建了一个svg元素，因为在它的style标签中有background-color，所以它是可见的。这一段代码为给定的宽和高腾出空间。
下一步是在svg区域中创建图形。SVG 支持多种图形，比如矩形和圆形，并用它们来显示数据。例如，在条形图中一个矩形（）SVG 图形可以创建一个组。
当把图形放入svg区域中时，你可以用x和y坐标来指定它的位置。起始点 (0,0) 是在左上角。x正值将图形右移，y正值将图形从原点下移
若要把一个图形放在上个挑战的 500（宽）x 100（高）的svg中心，可将x坐标设置为 250，y坐标设置为 50。
SVG 的rect有四个属性。x和y坐标指定图形放在svg区域的位置，height和width指定图形大小。

用append()方法给svg添加一个rect图形。将它的width属性设置为 25，height属性设置为 100，x和y属性都设置为 0。

<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
// 在下面添加你的代码
.append("rect")
.attr("width", 25)
.attr("height", 100)
.attr("x", 0)
.attr

最低0.47元/天解锁文章

我准备好了我准备好了

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
FCC 4.数据可视化 4.1用 D3 实现数据可视化

Introduction to the Data Visualization with D3 ChallengesD3.js，也叫 D3，表示数据驱动文档。 D3 是一个在浏览器里创建动态可视化数据的 JavaScript 库。它基于 web 标准，即 HTML、CSS 和 SVG 技术。D3 获取输入数据并且映射到相应的可视化内容里。它支持不同的数据格式。D3 允许将数据绑定到 DOM 上。你可以使用 D3 的内建方法通过 HMTL 或者 SVG 元素实现数据可视化。D3 提供了大量控制数据的方法。
复制链接

扫一扫