add horizon chart

areachart/difference-chart/app.js

@@ -168,14 +168,14 @@ d3.tsv(dataURL, d => ({
    * 绘制面积图内的面积形状
    *
    */
-  // 创建一个 <clipPath> 元素（一般具有属性 id 以便被其他元素引用），其作用充当一层剪贴蒙版，具体形状由其包含的元素决定
+  // 创建一个元素 <clipPath> （一般具有属性 id 以便被其他元素引用）路径剪裁遮罩，其作用充当一层剪贴蒙版，具体形状由其包含的元素决定
   // 它一般与其他元素一起使用（通过属性 clip-path 来指定），为其他元素自定义了视口
   // 即在 <clipPath> 所规定的区域以外的部分都会被裁剪掉
   // 具体介绍可以参考 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath
   svg.append("clipPath")
     // 为 <clipPath> 设置属性 id
     .attr("id", "above")
-    // 在其中添加 <path> 子元素，以设置剪切路径的形状
+    // 在其中添加 <path> 子元素，以设置剪裁路径的形状
     .append("path")
       // 使用方法 d3.area() 创建一个面积生成器，它会根据给定的数据（svg 所绑定的数据）设置 <path> 路径形状
       // 💡 调用面积生成器时返回的结果，会基于生成器是否设置了画布上下文 context 而不同。如果设置了画布上下文 context，则生成一系列在画布上绘制路径的方法，通过调用它们可以将路径绘制到画布上；如果没有设置画布上下文 context，则生成字符串，可以作为 `<path>` 元素的属性 `d` 的值
@@ -195,13 +195,13 @@ d3.tsv(dataURL, d => ({
           // 设置上边界线的纵坐标的读取函数，基于 d.value1 纽约的温度，并采用比例尺 y 进行映射，得到纵坐标轴在 svg 中的坐标位置
           .y1(d => y(d.value1)));
   // 正如该剪贴路径的 id 名称一样，该剪贴蒙版的显示区域/视口范围位于 svg 的上半部分，即从 svg 的顶部，直到橙色面积的下边缘
-  // 通过该剪切路径的约束，可以呈现由两地之间较低的日间温度所构成的的折线
+  // 通过该剪裁路径的约束，可以呈现由两地之间较低的日间温度所构成的的折线
 
   // 创建一个 <clipPath> 元素
   svg.append("clipPath")
     // 为 <clipPath> 设置属性 id
     .attr("id","below")
-    // 在其中添加 <path> 子元素，以设置剪切路径的形状
+    // 在其中添加 <path> 子元素，以设置剪裁路径的形状
     .append("path")
       // 使用方法 d3.area() 创建一个面积生成器，它会根据给定的数据（svg 所绑定的数据）设置 <path> 路径形状
       .attr("d", d3.area()
@@ -214,13 +214,13 @@ d3.tsv(dataURL, d => ({
           // 设置上边界线的纵坐标的读取函数，基于 d.value1 纽约的温度，并采用比例尺 y 进行映射，得到纵坐标轴在 svg 中的坐标位置
           .y1(d => y(d.value1)));
   // 正如该剪贴路径的 id 名称一样，该剪贴蒙版的显示区域/视口范围位于 svg 的下部分，即从 svg 的底部，直到蓝色面积的下边缘
-  // 通过该剪切路径的约束，可以呈现由两地之间较高的日间温度所构成的的折线
+  // 通过该剪裁路径的约束，可以呈现由两地之间较高的日间温度所构成的的折线
 
   // 💡 通过以上两个 <clipPath> 对面积图的共同约束，就可以裁剪出所需的差异图
 
   // 绘制表示三藩市温度的面积图，并通过 <clipPath> 进行裁剪
   svg.append("path") // 使用路径 <path> 元素绘制面积形状
-      // 设置属于 clip-path 以采用前面预设的 <clipPath id="above"> 对图形进行裁剪/约束
+      // 设置属性 clip-path 以采用前面预设的 <clipPath id="above"> 对图形进行裁剪/约束
       .attr("clip-path", "url(#above)")
       .attr("fill", colors[1]) // 设置填充颜色为橙色
       // 使用方法 d3.area() 创建一个面积生成器，它会根据给定的数据（svg 所绑定的数据）设置 <path> 路径形状
@@ -237,7 +237,7 @@ d3.tsv(dataURL, d => ({
 
   // 绘制表示纽约温度的面积图，并通过 <clipPath> 进行裁剪
   svg.append("path") // 使用路径 <path> 元素绘制面积形状
-      // 设置属于 clip-path 以采用前面预设的 <clipPath id="below"> 对图形进行裁剪/约束
+      // 设置属性 clip-path 以采用前面预设的 <clipPath id="below"> 对图形进行裁剪/约束
       .attr("clip-path", "url(#below)")
       .attr("fill", colors[0]) // 设置填充颜色为浅蓝色
       // 使用方法 d3.area() 创建一个面积生成器，它会根据给定的数据（svg 所绑定的数据）设置 <path> 路径形状