update comment about call function

Benbinbin · Jul 29, 2024 · 54c1450 · 54c1450
1 parent ce28dfd
commit 54c1450
Show file tree

Hide file tree

Showing 29 changed files with 30 additions and 30 deletions.
diff --git a/areachart/band-chart/app.js b/areachart/band-chart/app.js
@@ -89,7 +89,7 @@ d3.csv(dataURL, d3.autoType).then((sftemp) => {
     // 👇 在后面使用纵坐标轴的刻度线来绘制
     .call(g => g.select(".domain").remove());
   // 💡 注意以上使用的是方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/areachart/difference-chart-v2/app.js b/areachart/difference-chart-v2/app.js
@@ -135,7 +135,7 @@ d3.tsv(dataURL, d => ({
     // 删掉上一步所生成的坐标轴的轴线（它含有 domain 类名）
     .call(g => g.select(".domain").remove());
   // 💡 注意以上使用的是方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/areachart/difference-chart/app.js b/areachart/difference-chart/app.js
@@ -135,7 +135,7 @@ d3.tsv(dataURL, d => ({
     // 删掉上一步所生成的坐标轴的轴线（它含有 domain 类名）
     .call(g => g.select(".domain").remove());
   // 💡 注意以上使用的是方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/areachart/horizon-chart/app.js b/areachart/horizon-chart/app.js
@@ -151,7 +151,7 @@ d3.csv(dataURL, d3.autoType).then((data) => {
     // 删掉上一步所生成的坐标轴的轴线（它含有 domain 类名）
     .call(g => g.select(".domain").remove());
   // 💡 注意以上使用的是方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/areachart/ridgeline-plot/app.js b/areachart/ridgeline-plot/app.js
@@ -154,7 +154,7 @@ d3.csv(dataURL, d3.autoType).then((traffic) => {
       // 而且将坐标轴的外侧刻度 tickSizeOuter 长度设置为 0（即取消坐标轴首尾两端的刻度）
       .tickSizeOuter(0));
   // 💡 注意以上使用的是方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集中（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/areachart/zoomable-areachart/app.js b/areachart/zoomable-areachart/app.js
@@ -94,7 +94,7 @@ d3.csv(dataURL, d3.autoType).then((data) => {
       // 通过设置 CSS 的 transform 属性将横坐标轴容器「移动」到底部
       .attr("transform", `translate(0,${height - marginBottom})`)
       // 通过 selection.call(axis) 的方式来调用函数
-      // 会将选择集中的元素 <g> 传递给函数，作为第一个参数
+      // 会将选择集（只包含一个元素 <g>）传递给函数，作为第一个参数
       // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call
       // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法
       .call(xAxis, x);
@@ -236,7 +236,7 @@ const path = svg.append("path") // 使用路径 <path> 元素绘制面积形状
     .transition()
       .duration(750) // 设置过渡持续时间
       // 设置初始缩放状态
-      // 💡 transition.call(function[, arguments…]) 执行一次函数 function 它其实和ff selection.call() 方法类似
+      // 💡 transition.call(function[, arguments…]) 执行一次函数 function 它其实和 selection.call() 方法类似
       // 💡 而且将过渡管理器作为第一个入参传递给 function，而其他传入的参数 arguments... 同样传给 function
       // 💡 最后返回当前过渡管理器，这样是为了便于后续进行链式调用
       // 具体参考官方文档 https://d3js.org/d3-transition/control-flow#transition_call

diff --git a/barchart/group-barchart/app.js b/barchart/group-barchart/app.js
@@ -146,7 +146,7 @@ d3.csv(dataURL, d3.autoType).then((data) => {
     // ⚠️ 注意所使用的比例尺是「宏观」比例尺 fx，因为它才是是负责横坐标轴整体的映射关系的
     // 而且将坐标轴的外侧刻度 tickSizeOuter 长度设置为 0（即取消坐标轴首尾两端的刻度）
     // 💡 注意这里使用的是方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-    // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+    // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
     // 以便将坐标轴在相应容器内部渲染出来
     // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call
     // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/barchart/histogram/app.js b/barchart/histogram/app.js
@@ -112,7 +112,7 @@ d3.csv(dataURL, d3.autoType).then((data) => {
     // 💡 另外值得留意的一点是这里使用的方法 selection.call(func)
     // 💡 该方法会执行一次入参的函数 func，而且将选择集 selection 作为第一个入参传递给 func
     // 💡 这里传入的参数是坐标轴对象 axis
-    // 💡 所以坐标轴对象实际上也是一个方法，接受一个 SVG 元素 context（一般是一个 <g> 元素），将坐标轴在其内部渲染出来
+    // 💡 所以坐标轴对象实际上也是一个方法，接受一个 SVG 元素 context（一般只包含一个 <g> 元素），将坐标轴在其内部渲染出来
     // 💡 最后返回当前选择集，这样是为了便于后续进行链式调用
     // 💡 具体可以参考 https://github.com/d3/d3-selection#selection_call
     // 💡 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/barchart/horizontal-stacked-barchart/app.js b/barchart/horizontal-stacked-barchart/app.js
@@ -190,7 +190,7 @@ d3.csv(dataURL, d3.autoType).then((data) => {
     // 而第二个参数用于设置刻度值格式，这里设置为 "s" 表示数值采用 SI-prefix 国际单位制词头，例如 k 表示千，M 表示百万
     // 具体参考 https://en.wikipedia.org/wiki/Metric_prefix
     // 💡 注意这里使用的是方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-    // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+    // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
     // 以便将坐标轴在相应容器内部渲染出来
     // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call
     // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/barchart/normalized-stacked-barchart/app.js b/barchart/normalized-stacked-barchart/app.js
@@ -199,7 +199,7 @@ d3.csv(dataURL, d3.autoType).then((data) => {
       // 而第二个参数用于设置刻度值格式，这里设置为 "%" 表示数值采用百分比表示
     // 具体参考 https://en.wikipedia.org/wiki/Metric_prefix
     // 💡 注意这里使用的是方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-    // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+    // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
     // 以便将坐标轴在相应容器内部渲染出来
     // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call
     // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/barchart/revenue-by-music-format/app.js b/barchart/revenue-by-music-format/app.js
@@ -199,7 +199,7 @@ d3.csv(dataURL, ({ Format, Year, ["Revenue (Inflation Adjusted)"]: Revenue }) =>
     .attr("transform", `translate(0,${height - margin.bottom})`)
     // 横轴是一个刻度值朝下的坐标轴
     // 💡 注意这里使用的是方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-    // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+    // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
     // 以便将坐标轴在相应容器内部渲染出来
     // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call
     // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/barchart/stacked-barchart/app.js b/barchart/stacked-barchart/app.js
@@ -168,7 +168,7 @@ d3.csv(dataURL, d3.autoType).then((data) => {
     // 横轴是一个刻度值朝下的坐标轴
     // 而且将坐标轴的外侧刻度 tickSizeOuter 长度设置为 0（即取消坐标轴首尾两端的刻度）
     // 💡 注意这里使用的是方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-    // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+    // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
     // 以便将坐标轴在相应容器内部渲染出来
     // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call
     // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/linechart/bar-line-chart/app.js b/linechart/bar-line-chart/app.js
@@ -107,7 +107,7 @@ d3.csv(dataURL, d3.autoType).then((data) => {
       // 而且将坐标轴的外侧刻度 tickSizeOuter 长度设置为 0（即取消坐标轴首尾两端的刻度）
       .tickSizeOuter(0))
   // 💡 注意以上通过方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/linechart/candlestick-chart/app.js b/linechart/candlestick-chart/app.js
@@ -128,7 +128,7 @@ d3.csv(dataURL, d3.autoType).then((ticker) => {
     // 删掉上一步所生成的坐标轴的轴线（它含有 domain 类名）
     .call(g => g.select(".domain").remove());
   // 💡 注意以上通过方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/linechart/gradient-encoding-line-chart/app.js b/linechart/gradient-encoding-line-chart/app.js
@@ -105,7 +105,7 @@ d3.csv(dataURL, d3.autoType).then((data) => {
     // 删掉上一步所生成的坐标轴的轴线（它含有 domain 类名）
     .call(g => g.select(".domain").remove());
   // 💡 注意以上通过方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/linechart/inline-labels-line-chart/app.js b/linechart/inline-labels-line-chart/app.js
@@ -115,7 +115,7 @@ d3.csv(dataURL, d3.autoType).then((data) => {
     // 而且将坐标轴的外侧刻度 tickSizeOuter 长度设置为 0（即取消坐标轴首尾两端的刻度）
     .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
   // 💡 注意以上通过方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/linechart/line-chart-connected/app.js b/linechart/line-chart-connected/app.js
@@ -96,7 +96,7 @@ d3.csv(dataURL, d3.autoType).then((driving) => {
       .attr("fill", "currentColor") // 设置文本的颜色
       .text("Miles per person per year")); // 设置文本内容
   // 💡 注意以上通过方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/linechart/ohlc-chart/app.js b/linechart/ohlc-chart/app.js
@@ -156,7 +156,7 @@ d3.csv(dataURL,
     // 删掉上一步所生成的坐标轴的轴线（它含有 domain 类名）
     .call(g => g.select(".domain").remove());
   // 💡 注意以上通过方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/linechart/scale-switch/app.js b/linechart/scale-switch/app.js
@@ -133,7 +133,7 @@ d3.csv(dataURL, d3.autoType).then((data) => {
   // 💡 值得留意前面使用了方法 selection.call(func)
   // 💡 该方法会执行一次入参的函数 func，而且将选择集 selection 作为第一个入参传递给 func
   // 💡 这里传入的参数是坐标轴对象 axis
-  // 💡 所以坐标轴对象实际上也是一个方法，接受一个 SVG 元素 context（一般是一个 <g> 元素），将坐标轴在其内部渲染出来
+  // 💡 所以坐标轴对象实际上也是一个方法，接受一个 SVG 元素 context（一般只包含一个 <g> 元素），将坐标轴在其内部渲染出来
   // 💡 最后返回当前选择集，这样是为了便于后续进行链式调用
   // 💡 具体可以参考 https://github.com/d3/d3-selection#selection_call
   // 💡 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/linechart/stringline-chart/app.js b/linechart/stringline-chart/app.js
@@ -171,7 +171,7 @@ d3.tsv(dataURL, d3.autoType).then((rawData) => {
       .attr("dy", "0.35em")
       .text(d => d.name))
   // 💡 注意以上有多次通过 selection.call() 的方式来执行代码/调用函数
-  // 会将选择集中的元素 <g> 作为第一个参数传递给回调函数
+  // 会将选择集（只包含一个元素 <g>）作为第一个参数传递给回调函数
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法
 

diff --git a/linechart/threshold-encoding-line-chart/app.js b/linechart/threshold-encoding-line-chart/app.js
@@ -96,7 +96,7 @@ d3.csv(dataURL, d3.autoType).then((data) => {
     // 删掉上一步所生成的坐标轴的轴线（它含有 domain 类名）
     .call(g => g.select(".domain").remove());
   // 💡 注意以上通过方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/linechart/variable-color-line-chart/app.js b/linechart/variable-color-line-chart/app.js
@@ -127,7 +127,7 @@ d3.csv(dataURL, d3.autoType).then((data) => {
     // 删掉上一步所生成的坐标轴的轴线（它含有 domain 类名）
     .call(g => g.select(".domain").remove());
   // 💡 注意以上通过方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法

diff --git a/linechart/you-draw-it/app.js b/linechart/you-draw-it/app.js
@@ -81,7 +81,7 @@ function Drawer({
     .attr("transform", `translate(0,${height - marginBottom})`)
     .call(xAxis);
   // 💡 注意这里使用的是方法 selection.call(axis) 的方式来调用坐标轴对象（方法）
-  // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数
+  // 会将选择集（只包含一个元素 <g>）传递给坐标轴对象的方法，作为第一个参数
   // 以便将坐标轴在相应容器内部渲染出来
   // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call
   // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法