D3 二维图表的绘制系列（十一）南丁格尔图

上一篇：环状饼图 https://blog.youkuaiyun.com/zjw_python/article/details/98480632

下一篇：基础散点图 https://blog.youkuaiyun.com/zjw_python/article/details/98483109

代码结构和初始化画布的Chart对象介绍，请先看 https://blog.youkuaiyun.com/zjw_python/article/details/98182540

本图完整的源码地址： https://github.com/zjw666/D3_demo/tree/master/src/pieChart/nightingale

1 图表效果

在这里插入图片描述

2 数据

date,money
Mon,120
Tue,200
Wed,150
Thu,80
Fri,70
Sat,110
Sun,130

3 关键代码

导入数据，转换为对象数组

d3.csv('./data.csv', function(d){
   
   
    return {
   
   
        date: d.date,
        money: +d.money
    };
}).then(function(data){

一些样式参数配置，由于南丁格尔图是以扇形半径作为映射点，因此扇形外半径不再是定值

const config = {
   
   
        margins: {
   
   top: 80, left: 80, bottom: 50, right: 80},
        textColor: 'black',
        title: '南丁格尔图',
        innerRadius: 0,
        textOffsetH: 10,
        lineColor: 'black',
        animateDuration: 1000
    }

尺度转换，与基础饼图相比，新增一个半径值得转换函数

/* ----------------------------尺度转换------------------------  */
    chart.arcAngle = d3.pie()
                    .sort((d,i) => i)
                    .value((d) => d.money);

    chart.scaleRadius = d3.scaleLinear()
                            .domain([0, d3.max(data.map((d) => d.money))])
                            .range([0, d3.min([chart.getBodyWidth(), chart.getBodyHeight()]) * 0.5])

渲染扇形，与基础饼图相比，南丁格尔图新增一个扇形半径的映射点，在这里，我们动画效果以半径的变化为特征，适当修改中间帧函数中的代码

/* ----------------------------渲染扇形------------------------  */
    chart.renderSlices = function(){
   
   
        const slices = chart.body().append('g')
                            .classed('pie', true)