D3.js(三) ------- 散点图、气泡图、折线图

柱状图、折线图、散点图和气泡图都是较为相似的图。

一、散点图

先看效果图，由图想到需要哪些知识点

同折线图的坐标轴的实现是相同的.

• 先用 d3.scaleLinear() 线性比例尺来创建比例尺

• 再用 d3.axisBottom().scale() / var yAxis = d3.axisLeft().scale() 创建坐标轴并且设置对应的比例尺，

• 最后 添加SVG元素并“绑定”坐标轴到其上 ，就可以看到完成以后的坐标轴。
  注意:这里需要对移动SVG元素，使它们在视觉上组装成一个坐标系（但实际上它们在位置上是零散的，并没有很强的关系）。

具体实现 ⬇️

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(yScale)

3⃣️ ： 把x轴 , y轴应用到对应的SVG元素上

// 把x轴应用到对应的SVG元素上
 chart
   .append("g")
   .attr("class", "axis")
   .attr(
     "transform",
     "translate(0," + (height - padding.top - padding.bottom) + ")"
   )
   .call(xAxis);
// 把y轴应用到对应的SVG元素上
 chart
   .append("g")
   .attr("class", "axis")
   .call(yAxis);

散点的实现

• 在图表中一般点都是通过画圆来实现的，当圆的半径足够小的时候，它就是点。

// 添加散点
    chart
      .attr("class", "point")
      .selectAll(".point")
      .data(dataset)
      .enter()
      .append("circle")
      .attr('fill','#2ec7c9')
      .attr('opacity','0.7')
      .attr("cx", function(d) {
        return xScale(d[0]);
      })
      .attr("cy", function(d) {
        return yScale(d[1]);
      })
      .attr("r", 5);

二、气泡图

气泡图和散点图实现原理一样，在这就不做重复，点此了解更多

折线图

先看效果：

实现：

折线图的绘制

• 线条生成器 : line
• line.curve([curve]) : 设置线段的曲线模式，即两个点之间如何连接。

  .curve(d3.curveBasis)   
     // d3.curveBasis  // 曲线插值方式为三次 basis 曲线

核心代码：

• 设置折线

let line = d3
     .line()  //创建一个新的线条生成器
     .x(function(d, i) {
       return (
         padding.left +
         ((width - padding.left - padding.right) / _this.lineData.length) *
           (i + 0.5)
       );
     })
     .y(function(d, i) {
       return yScale(d);
     })
     .curve(d3.curveBasis); 
     		//  d3.curve  设置曲线插值方式
            //  d3.curveBasis  三次 basis 曲线

• 绘制折线路径

   svg
      .append("path")
      .attr("d", line(_this.lineData))
      .attr("stroke", "red")  //定义一条线、文本或元素轮廓颜色
      .attr("stroke-width", "4px") //定义一条线、文本或元素轮廓厚度
      .attr("fill", "none")
      .attr("class", "line"); 
  }

折线图让其以区域形式展现

效果如下：

• area - 生成一个线性的区域,用于区域图表.

• area.x - 获取或设置x坐标.

• area.y - 获取或设置y坐标.

• area.y0 - 获取或设置y0坐标(基线).

• area.y1 - 获取或设置y1坐标(背线).

通俗来讲：y0 函数可以确定 x 点对应的 y 轴投影下限(base)，y1 确定上限(top)。

核心代码：

let area = d3
     .area()
     // .x()和.y()是根据输入数据得到的点的位置信息
     .x(function(d, i) {
       return (
         padding.left +
         ((width - padding.left - padding.right) / _this.lineData.length) *
           (i + 0.5)
       );
     })
     .y(function(d, i) {
       return height - padding.bottom;
     })
     // y0 函数可以确定 x 点对应的 y 轴投影下限(base)，y1 确定上限(top) 
     .y1(function(d, i) {
       return yScale(d);
     })
     .curve(d3.curveBasis);
   svg
     .append("path")
     .attr("d", area(_this.areaData))
     .style("fill","skyblue")