D3笔记

loading data onto the page

waitSeconds=numSeconds=>new Promise(resolve=>{
    const message=`${numSeconds} seconds have passed!`;
    setTimeout(()=>resolve(message),numSeconds*1000);
})

waitSeconds(2).then(message=>console.log(message));

结果：等待两秒后显示 2 seconds have passed!

ECMAScript 6 Features

HTML CSS SVG

Scalable Vector Graph

import{select,arc} from 'd3'

const width=+svg.attr('width') //string转换为float
const width=parseFloat(svg.attr('width'))

const circle=svg.append('circle')
	.attr('fill','yellow') 
	.attr('stroke','black')

const g=svg.append('g')
	.attr('transform','translate(${width/2},${height/2})');
const mouth=svg.append('path')
	.attr('d',acr()({
        innerRadius:80,
        outerRadius:100,
        startAngle:Math.PI/2,
        endAngle:Math,PI*3/2
    }));

d3

csv comma seperated value

customizing axis

d3.format() 函数