D3.js（四）：动画、交互、json、csv、tsv、html、text

刺骨的言语ヽ痛彻心扉 2024-04-06 10:17 18阅读 0赞

### 基础动画 ###

![在这里插入图片描述][7bd7cf7955dc46138c99afc13e845654.gif_pic_center]

let [w, h] = [400, 400];
    let svg = d3.select('body').append('svg').attr('width', w).attr('height', h);
    
    let center = [
        [0.50, 0.50], [0.70, 0.80], [0.40, 0.90],
        [0.11, 0.32], [0.88, 0.25], [0.75, 0.12],
        [0.50, 0.10], [0.20, 0.30], [0.40, 0.10],
        [0.60, 0.70],
    ];
    
    let padding = {
        top: 30, right: 30, bottom: 30, left: 30};
    
    let [xAxisWidth, yAxisWidth] = [300, 300];
    
    let xScale = d3.scaleLinear().domain([0, 1]).range([0, xAxisWidth]);
    let yScale = d3.scaleLinear().domain([0, 1]).range([0, yAxisWidth]);
    
    let update = svg.selectAll('circle').data(center);
    let enter = update.enter();
    let exit = update.exit();
    
    update.transition()
        .duration(1000)
        .attr('cx', d => padding.left + xScale(d[0]))
        .attr('cy', d => h - padding.bottom + yScale(d[0]));
    
    enter.append('circle')
        .attr('fill', 'red')
        .attr('cx', padding.left)
        .attr('cy', h - padding.bottom)
        .attr('r', 5)
        .transition()
        .delay(500) // 延迟500ms后执行
        .duration(1000) // 过度时长为1000ms
        .attr('cx', d => padding.left + xScale(d[0]))
        .attr('cy', d => h - padding.bottom - yScale(d[1]));
    
    exit.transition().duration(500).attr('fill', '#fff').remove();
    
    // x轴 / y轴
    let xAxis = d3.axisBottom().scale(xScale).ticks(10);
    yScale.range([yAxisWidth, 0]);
    
    let yAxis = d3.axisLeft().scale(yScale).ticks(10);
    
    svg.append('g')
        .classed('axis', true)
        .attr('transform', `translate(${
          padding.left},${
          h - padding.bottom})`)
        .call(xAxis);
    
    svg.append('g')
        .classed('axis', true)
        .attr('transform', `translate(${
          padding.left},${
          h - padding.bottom - yAxisWidth})`)
        .call(yAxis);

### 交互 ###

![在这里插入图片描述][6d00ded257cf4cfaafbbbd1454489069.gif_pic_center]

let [w, h] = [400, 400];
    let svg = d3.select('body').append('svg').attr('width', w).attr('height', h);
    
    let data = [100, 200, 300, 40, 50];
    
    let fill = '';
    
    svg.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('width', 50)
        .attr('height', d => d)
        .attr('x', (d, i) => 30 + i * 70)
        .attr('y', d => h - d)
        .attr('fill', (d, i) => d3.schemeCategory10[i])
        .on('click', function (e, data) {
        
            console.log(this, e, data)
        })
        .on('mouseover', function (e, data) {
        
            console.log(this, e, data)
            fill = this.getAttribute('fill');
            console.log(fill)
            d3.select(this)
                .transition()
                .duration(500)
                .attr('fill', 'red');
        })
        .on('mouseout', function (e, data) {
        
            console.log(this, e, data)
            d3.select(this)
                .transition()
                .duration(200)
                .attr('fill', fill);
        })

### CSV ###

![在这里插入图片描述][e1df07cfdc3840309b141653452fae29.png_pic_center]

/**
     * {姓名: '张三', 年龄: '18', 性别: '女', 生日: '2020-02-02'}
     * {姓名: '李四', 年龄: '20', 性别: '女', 生日: '2020-01-02'}
     * {姓名: '王五', 年龄: '21', 性别: '男', 生日: '2020-02-10'}
     * {姓名: '赵六', 年龄: '10', 性别: '女', 生日: '2020-12-02'}
     * {姓名: '', 年龄: '', 性别: '', 生日: ''}
     * {姓名: 'Lee', 年龄: '16', 性别: '男', 生日: '2020-12-02'}
     */
    d3.csv('./assets/名单.csv', (data, i, key) => {
        
        console.log(data, i, key)
    });
    
    /**
     * {姓名,年龄,性别,生日: '张三,18,女,2020-02-02'}
     * {姓名,年龄,性别,生日: '李四,20,女,2020-01-02'}
     * {姓名,年龄,性别,生日: '王五,21,男,2020-02-10'}
     * {姓名,年龄,性别,生日: '赵六,10,女,2020-12-02'}
     * {姓名,年龄,性别,生日: ',,,'}
     * {姓名,年龄,性别,生日: 'Lee,16,男,2020-12-02'}
     */
    d3.tsv('./assets/名单.csv', function (data, i, key) {
        
        console.log(data, i, key)
    });

### JSON ###

![在这里插入图片描述][22e366d295534327932439da36d59c99.png_pic_center]

// {"code":200,"msg":"ok","data":{"name":"Lee","age":18}}
    d3.json('./assets/data.json').then(res => {
        
        console.log(JSON.stringify(res))
    });

### HTML ###

![在这里插入图片描述][88cc1b61840543149a51089d5da01426.png_pic_center]

// ··· html ···
    d3.html('./assets/data.html').then(res => {
        
        console.log(res)
    });

### Text ###

![在这里插入图片描述][491cdb334a1e46708045c25df61742c8.png_pic_center]

// ProsperLee
    d3.text('./assets/data.txt').then(res => {
        
        console.log(res)
    });

[7bd7cf7955dc46138c99afc13e845654.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/776089243df2422badb6af5513ff5b5e.gif
[6d00ded257cf4cfaafbbbd1454489069.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ffbce13d8f6a42f28d1ab774e2cec1ec.gif
[e1df07cfdc3840309b141653452fae29.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d47546bcdfd248818909d90afe76926d.png
[22e366d295534327932439da36d59c99.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/cff24f579101454daca6071973ba599c.png
[88cc1b61840543149a51089d5da01426.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/291bfb70966940a2b63f9261b8172494.png
[491cdb334a1e46708045c25df61742c8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b89d3946618747f6a098f2a372243be8.png