D3 二维图表的绘制系列（三十）平行坐标系折线图

上一篇： 径向树图

下一篇： 热力地图

代码结构和初始化画布的Chart对象介绍，请先看 这里

本图完整的源码地址： 这里

1 图表效果

2 数据

name,math,chinese,english,chemistry
小明,30,60,57,49
小红,50,95,65,65
小张,66,70,40,88

3 关键代码

导入数据

d3.csv('./data.csv', function(d){
   
   
    return {
   
   
        name: d.name,
        math: +d.math,
        chinese: +d.chinese,
        english: +d.english,
        chemistry: +d.chemistry
    };
}).then(function(data){
   
   
....

一些样式参数配置

const config = {
   
   
        lineColor: chart._colors(0),
        margins: {
   
   top: 80, left: 50, bottom: 50, right: 50},
        textColor: 'black',
        title: '平行坐标系折线图',
        hoverColor: 'red',
        paddin