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

最新推荐文章于 2024-01-01 11:02:58 发布

PAT-python-zjw

最新推荐文章于 2024-01-01 11:02:58 发布

阅读量5.8k

点赞数 1

分类专栏： D3.js 二维图表系列文章标签： d3

本文为博主原创文章，转载请务必附上文章网址，谢谢。

本文链接：https://blog.youkuaiyun.com/zjw_python/article/details/102802154

版权

上一篇：径向树图

下一篇：热力地图

代码结构和初始化画布的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',
        padding:<