chore: update desc

Author: gywgithub

src/components/CompleteHistogramI.vue

@@ -11,7 +11,6 @@ export default {
     return {}
   },
   mounted () {
-    // 得到 SVG 画布
     let marge = { top: 60, bottom: 60, left: 60, right: 60 }
     let svg = d3.select('svg')
     let width = svg.attr('width')
@@ -21,7 +20,8 @@ export default {
 
     let dataset = [10, 20, 30, 23, 13, 40, 27, 35, 20]
 
-    // x , y 方向绘制坐标轴
+    // Draw the axis in the X, Y direction
+    //  x , y 方向绘制坐标轴
     let xScale = d3.scaleBand()
       .domain(d3.range(dataset.length))
       .rangeRound([0, width - marge.left - marge.right])
@@ -40,12 +40,14 @@ export default {
       .attr('transform', 'translate(0, 0)')
       .call(yAxis)
 
+    // Create gourps for rectangles and corresponding text
     // 给矩形和对应文字创建分组
     let gs = g.selectAll('.rect')
       .data(dataset)
       .enter()
       .append('g')
 
+    // draw rectangle
     // 绘制矩形
     let rectPadding = 20
     gs.append('rect')
@@ -62,6 +64,8 @@ export default {
         return height - marge.top - marge.bottom - yScale(d)
       })
       .attr('fill', 'lightblue')
+
+    // Draw text
     // 绘制文字
     gs.append('text')
       .attr('x', function (d, i) {

src/components/CompleteHistogramII.vue

@@ -11,7 +11,6 @@ export default {
     return {}
   },
   mounted () {
-    // 得到 SVG 画布
     let marge = { top: 60, bottom: 60, left: 60, right: 60 }
     let svg = d3.select('svg')
     let width = svg.attr('width')
@@ -21,6 +20,7 @@ export default {
 
     let dataset = [10, 20, 30, 23, 13, 40, 27, 35, 20]
 
+    // Draw the axis in the X, Y direction
     // x , y 方向绘制坐标轴
     let xScale = d3.scaleBand()
       .domain(d3.range(dataset.length))
@@ -40,19 +40,22 @@ export default {
       .attr('transform', 'translate(0, 0)')
       .call(yAxis)
 
+    // Create gourps for rectangles and corresponding text
     // 给矩形和对应文字创建分组
     let gs = g.selectAll('.rect')
       .data(dataset)
       .enter()
       .append('g')
 
+    // draw rectangle
     // 绘制矩形
     let rectPadding = 20
     gs.append('rect')
       .attr('x', function (d, i) {
         return xScale(i) + rectPadding / 2
       })
       .attr('y', function () {
+        // init state
         // 初始状态
         let min = yScale.domain()[0]
         return yScale(min)
@@ -61,6 +64,7 @@ export default {
         return xScale.step() - rectPadding
       })
       .attr('height', function () {
+        // init state
         // 初始状态
         return 0
       })
@@ -72,13 +76,16 @@ export default {
       })
       // .ease(d3.easeElasticInout)
       .attr('y', function (d) {
+        // Return to the final state
         // 回到最终状态
         return yScale(d)
       })
       .attr('height', function (d) {
+        // Return to the final state
         // 回到最终状态
         return height - marge.top - marge.bottom - yScale(d)
       })
+    // Draw text
     // 绘制文字
     gs.append('text')
       .attr('x', function (d, i) {

src/components/CompleteHistogramIII.vue

@@ -32,12 +32,15 @@ export default {
     g.append('g')
       .attr('transform', 'trnslate(0, 0)')
       .call(yAxis)
+
+    // Draw rectangle and text
     // 绘制矩形和文字
     let gs = g.selectAll('.rect')
       .data(dataset)
       .enter()
       .append('g')
 
+    // Draw rectangle
     // 绘制矩形
     let rectPadding = 20
     gs.append('rect')
@@ -67,6 +70,8 @@ export default {
           .duration(1000)
           .attr('fill', 'lightblue')
       })
+
+    // Draw text
     // 绘制文字
     gs.append('text')
       .attr('x', function (d, i) {

src/components/ForceDirectedGraph.vue

@@ -18,7 +18,7 @@ export default {
     let g = svg.append('g')
       .attr('transform', 'translate(' + marge.top + ',' + marge.left + ')')
 
-    // 准备数据
+    // Node Dataset
     // 节点集
     let nodes = [
       { name: '湖南邵阳' },
@@ -31,6 +31,7 @@ export default {
       { name: '小明' },
       { name: '组长' }
     ]
+    // Side Dataset
     // 边集
     let edges = [
       { source: 0, target: 4, relation: '籍贯', value: 1.3 },
@@ -44,31 +45,35 @@ export default {
       { source: 6, target: 7, relation: '朋友', value: 0.7 },
       { source: 6, target: 8, relation: '职责', value: 2 }
     ]
+    // Set a color scale
     // 设置一个颜色比例尺
     let colorScale = d3.scaleOrdinal()
       .domain(d3.range(nodes.length))
       .range(d3.schemeCategory10)
+    // Create a new force guide diagram
     // 新建一个力导向图
     let forceSimulation = d3.forceSimulation()
       .force('link', d3.forceLink())
       .force('charge', d3.forceManyBody())
       .force('center', d3.forceCenter())
+    // Generate node data
     // 生成节点数据
     forceSimulation.nodes(nodes)
       .on('tick', ticked)
+    // Generate side data
     // 生成边数据
     forceSimulation.force('link')
       .links(edges)
-      .distance(function (d) { // 每一边的长度
+      .distance(function (d) { // side length / 每一边的长度
         return d.value * 100
       })
+    // Set drawing center location
     // 设置图形中心位置
     forceSimulation.force('center')
       .x(width / 2)
       .y(height / 2)
-    // // 顶点集，边集
-    // console.log(nodes)
-    // console.log(edges)
+
+    // Draw side
     // 绘制边
     let links = g.append('g')
       .selectAll('line')
@@ -79,6 +84,7 @@ export default {
         return colorScale(i)
       })
       .attr('stroke-width', 1)
+    // Text on side
     // 边上的文字
     let linksText = g.append('g')
       .selectAll('text')
@@ -88,6 +94,7 @@ export default {
       .text(function (d) {
         return d.relation
       })
+    // Create group
     // 创建分组
     let gs = g.selectAll('.circleText')
       .data(nodes)
@@ -103,13 +110,15 @@ export default {
         .on('drag', dragged)
         .on('end', ended)
       )
+    // Draw node
     // 绘制节点
     gs.append('circle')
       .attr('r', 10)
       .attr('fill', function (d, i) {
         return colorScale(i)
       })
-    // 文字
+    // Draw text
+    // 绘制文字
     gs.append('text')
       .attr('x', -10)
       .attr('y', -20)
@@ -133,7 +142,7 @@ export default {
     // drag
     function started (d) {
       if (!d3.event.active) {
-        forceSimulation.alphaTarget(0.8).restart() // 设置衰减系数，对节点位置移动过程的模拟，数值越高移动越快，数值范围[0, 1]
+        forceSimulation.alphaTarget(0.8).restart() // Set the attenuation coefficient to simulate the node position movement process. The higher the value, the faster the movement. The value range is [0, 1] // 设置衰减系数，对节点位置移动过程的模拟，数值越高移动越快，数值范围[0, 1]
       }
       d.fx = d.x
       d.fy = d.y