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

最新推荐文章于 2020-10-29 03:09:54 发布

原创最新推荐文章于 2020-10-29 03:09:54 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

D3 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用D3.js库创建散点图、气泡图和折线图。首先，通过实例展示了散点图的实现过程，包括设置线性比例尺、创建坐标轴以及绘制圆点。接着，提到气泡图的实现与散点图类似。最后，重点讲解了折线图的绘制，包括设置线条曲线模式和生成区域形式的折线图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、散点图

先看效果图，由图想到需要哪些知识点
在这里插入图片描述

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

先用 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")