d3.js分析车辆数据设计绘图可视化网页_车辆数据可视化页面-CSDN博客

本文链接：https://blog.csdn.net/weixin_53721065/article/details/140880663

一、数据来源

数据为.csv格式文件，其中包含车辆的品牌，动力类型，气缸数目，平均公路MPG，平均城市MPG等，格式如下例所示

Make,Fuel,EngineCylinders,AverageHighwayMPG,AverageCityMPG
Acura,Gasoline,4,35,25
Acura,Gasoline,6,28,21

二、数据加载

使用d3.js读取.csv中的数据，代码如下:

// 加载数据并初始化场景1
d3.csv("cars2017.csv").then(csvData => {
    data = csvData.map(d => ({
        make: d.Make,
        fuel: d.Fuel,
        engineCylinders: +d.EngineCylinders,
        highwayMPG: +d.AverageHighwayMPG,
        cityMPG: +d.AverageCityMPG
    }));
});

三、d3绘制可视化条形图

首先绑定数据

const y = d3.scaleBand().domain(averageHighwayMPG.map(d => d.make)).range([margin.top, height - margin.bottom]).padding(0.1);
    const x = d3.scaleLinear().domain([0, d3.max(averageHighwayMPG, d => d.highwayMPG)]).range([margin.left, width - margin.right]);

    const xAxis = d3.axisBottom(x); 
    const yAxis = d3.axisLeft(y);

然后进行绘制条形图，再添加坐标轴、图标图、图例等，界面如下图所示：

为了具体显示每个条形图的信息，设置了当鼠标移到条柱上时，显示更具体的统计分析信息，同时改变条柱的颜色，如下图。当鼠标移出时，恢复条柱的原始颜色并隐藏tooltip。

四、绘制多形状散点图

为了分析不同的车辆信息之间的关系，绘制AverageHighwayMPG,AverageCityMPG之间的散点关系图。中间为等值虚线，等值线之上的用一种颜色，下面用另一种颜色，同时新能源车用圆形代表，柴油和汽油车用矩形代表，同时给图表加上注释、标题、图例等。为了具体显示每个条形图的信息，设置了当鼠标移到条柱上时，显示更具体的统计分析信息，同时改变条柱的颜色，如下图。当鼠标移出时，恢复条柱的原始颜色并隐藏tooltip。