D3.js(三) ------- 散点图、气泡图、折线图_js散点不重复

具体实现 ⬇️

1⃣️ ：创建x轴 , y轴的比例尺
// 创建x轴的比例尺
    var xScale = d3
      .scaleLinear()
      .domain([140, 190])
      .range([0, width - padding.left - padding.right]);
// 创建y轴的比例尺
 	var yScale = d3
	   .scaleLinear()
	   .domain([40, 120])
	   .range([height - padding.top - padding.bottom, 0]);
2⃣️ ：创建x轴， 创建y轴 
// 创建x轴
  var xAxis = d3.axisBottom()
                .scale(xScale)        
// 创建y轴
  var yAxis = d3.axisLeft()
                .scale
缩放基础：.domain（）-输入域，.range（）-最大输出范围； 色标;
 缩放类型：.scaleLinear（）、. scaleOrdinal（）、. scaleBand（）、. scaleQuantize（）、. scaleQuantile（）
转换-互动性好，动画效果平滑
.transition（）-应用过渡
。期间（）
 .ease（d3.easeBounce）-控制过渡的速度
。延迟（）
 $ 0。 数据
顺序很重要
圆-context.arc（centerX，cent
                                    3.添加一个群组，并加入transform属性。svg 中的原点(0,0)位于左上角。1.先写一个svg标签，定好宽和高。是时间比例尺，刻度可以是年、月、日。7.绘制折线——添加一些样式信息。2.定义一个数据集合和一些变量。// 设置SVG容器和边距。4.设置x,y的比例尺。// 设置x和y比例尺。// 创建折线生成器。// 绘制x轴和y轴。
                                    let flag = false // 定义一个标识符
        const len = this.list.length // this.list是要插入的数据列表，array
        if (len === 0) {
          this.list.push(row)
        } else {
          for (let i = 0; i...
                                    递归是拖慢脚本运行速度的大敌之一，太多的递归会让浏览器变得越来越慢直到死掉或者莫名其妙的突然自动退出。这里我们可以通过memoization技术来替代函数中太多的递归调用，提升JavaScript效率。
需求是实现一个生命体征的体温单，x轴是时间线，y轴有多个体征项。效果不是特别复杂，但是行业特殊性，所以也没有现成可用的，所以用 d3.js 实现了一个多y轴的折线图。
这张图只用了d3.js的一些最基本用法，数据量也比较小，所以也用不到多么牛逼的用法，只涉及到了比例尺scale，轴axis，画线和点，最后我添加了一个缩放效果。
1.初始化一个svg...
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scal...
在 JavaScript 中，一般产生的随机数会重复，但是有时我们需要不重复的随机数，如何实现？下面就来讲解三种方法产生不重复的随机数，并进行比较，看那种方法效率高。方法一思路：首先创建一个1到3000的数组，每次取一个数，然后去除数组中取出的这个...
现在这个统计图还要解决几个问题：支持多个系列、为多系列加入图例。
现在的数据是单条折线，如果有多条折线，那么需要为它指定不同的名称和颜色，为它们指定图例，指定图例以后，我们通过图例来控制折线的显示
                                    根据项目的要求，利用d3.js画出x轴为时间轴，多条折线的折线图，看了官方的文档和很多参考资料才做了出来。所以想分享给程序猿朋友们。（网上找的基本上都不满足需求。只能靠自己一步一步写下来）
成果曲线图：