d3入门

d3的安装npm install d3 --save
在需要的文件中导入import * as d3 from "d3"

向svg中填充图形

<template>
    <div class="dthreeAppend">
        <p class="title">This is a d3</p>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
         width="600" height="300"></svg>
    </div>
</template>
<script>
import * as d3 from "d3"
export default {
   mounted(){
       var svg=d3.select('svg')
           .attr('width',600)
           .attr('height',400)
       svg.append('circle')
           .attr('cx',100)   //cx,cy圆心坐标
           .attr('cy',200)
           .attr('r',50)   //r圆心半径
           .attr('fill','blue');    //将圆设置为蓝色           
       svg.append('rect')   //矩形
          .attr('x',50)   //矩形左上角横坐标
          .attr('y',50)    //矩形左上角纵坐标
          .attr('width',100)    //矩形宽
          .attr('height',50)   //矩形高
          .attr('fill','skyblue')
   } 
}
</script>
<style lang="less" scoped>
.dthreeAppend{
    .title{
        font-size: 20px;
        font-weight: 600;
        color: blue;
        margin-bottom: 20px;
    }
    svg{
        width: 600px;
        height: 300px;
        border: 1px solid #000;
    }
}
</style>

d3柱形图

<template>
    <div class="dthreeBar">
        <p class="title">d3柱形图</p>
    </div>
</template>
<script>
import * as d3 from "d3"
export default {
     mounted(){
        var dthreeBar=d3.select('.dthreeBar');
        var dataset=[72,32,56,92];
        var width=200;
        var height=100;

        var svg=dthreeBar.append('svg')
            .attr('width',width)
            .attr('height',height)
            .style('border','1px solid #000')

        var rects=svg.selectAll('.myRact')
           .data(dataset)
           .enter()
           .append('rect')
           .attr('class',"myRact")
           .attr('fill','skyblue')   //将圆柱变为天蓝色
           .attr('x',function(d,i){
               return 20+35*i;    //20,55,90,125
           })
           .attr('y',function(d){    
               return height-d;     //88,78,44,88
           })
           .attr('width',30)    //圆柱的宽30,两个圆柱之间的间隔为5
           .attr('height',function(d){
               return d     //圆柱的高为d(即dataset里的值)
           })

        //添加文字部分
        var padding={top:15,left:20,right:5,bottom:0}   //设置padding

        var text=svg.selectAll('text')
                    .data(dataset)
                    .enter()
                    .append('text')
                    .attr('fill','red')
                    .attr('font-size','14px')
                    .attr('text-anchor','middle')   //text-anchor属性用于对齐（开始，中间或结束对齐）相对于给定点的文本字符串
                    .attr('x',function(d,i){
                        return padding.left + i*35;
                    })
                    .attr('y',function(d){
                        return height-padding.bottom -d;
                    })
                    .attr('dx',30 /2)  //dx是相对于x平移的大小
                    .attr('dy','1em')
                    .text(function(d){
                        return d;
                    })
    }
}
</script>
<style lang="less" scoped>
.dthreeBar{

    .title{
        font-size: 20px;
        font-weight: 600;
        color: blue;
        margin-bottom: 20px;
    }
   
}
</style>

选择集、数据绑定

<template>
    <div class="dthreeSelect">
        <p>apple</p>
        <p>pear</p>
        <p>banana</p>

        <span>one</span>
        <span class="my_span">two</span>
        <span class="my_span">three</span>

        <div></div>
        <div></div>
        <div></div>
    </div>
</template>
<script>
import * as d3 from "d3"
export default {
    mounted(){
        //选择集，select选中所有中的第一个，selectAll选中所有
        var dthreeSelect=d3.select('.dthreeSelect');
        dthreeSelect.style('background',"#ededed");
        var p=dthreeSelect.selectAll('p');
        p.style("color","red");
        //如何绑定第二个p,可以给p添加一个类名
        var span =dthreeSelect.selectAll('.my_span');
        span.style('color','blue')

        //数据绑定,D3 最大的特色就是能够将数据绑定到DOM上
        var div=dthreeSelect.selectAll('div');
        // var num = 30;
        //datum()：将指定数据赋值给被选择元素。
        // div.datum(num);  
        var num1 =[20,11,23,60,70];  
        
        //data()：将数据数组与选择集的元素结合。 
        //update      
        div.data(num1);  
        //参数d为数据 ，i为索引号(从0开始)
        div.text(function(d,i){
            return d +" "+ i;
        });
        div.style('color',function(d,i){
            return i%2==0 ? "blue":"red"    //索引为偶数时，背景为蓝色，为奇数时，背景为红色
        });
        //update 表示既拥html页面元素，又拥有数据；常常用于更新
        //enter 表示无html页面元素，拥有数据；常常用于添加数据；
        div.enter().append('div')
            .text(function(d) {return d;})
        //exit表示只拥有元素未能拥有数据，常用用于页面元素的批量删除
        // var exit=update.exit()   
        //             .remove();
    }
}
</script>
<style lang="less" scoped>
.dthreeSelect{
    width: 600px;
    height: 300px;
    border: 1px solid #000;

    span{
        margin-left: 30px;
    }
}
</style>

比例尺
线性比例尺

//线性比例尺
        var dataset=[1.2,2.3,0.9,1.5,3.3];
        var min=d3.min(dataset);
        var max=d3.max(dataset);
        let linear=d3.scaleLinear()   //d3.scaleLinear()返回一个线性比例尺，返回值可以当做函数来使用
                .domain([min,max])   //设置定义域，[min,max],相当于x轴  
                .range([0,300]);    //设置值域，相当于y轴     该线性函数为 y=125x-112.5
        console.log(linear(0.9))  
        console.log(linear(2.3))      
        console.log(linear(3.3))    

序数比例尺

 var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];
 var ordinal = d3.scaleOrdinal()        // 生成序数比例尺
            .domain(index)
            .range(color);
console.log(ordinal(0))
console.log(ordinal(2))     
console.log(ordinal(4)) 

坐标轴
d3.axisTop(scale) 为给定的scale构造一个新的面向顶部的轴生成器，其中带有空的刻度参数
线性
d3.axisRight(scale)为给定的scale构造一个新的面向右的轴生成器，其中带有空的刻度参数
线性
d3.axisBottom(scale)为给定的scale构造一个新的面向下的轴生成器，其中带有空的刻度参数
线性
d3.axisLeft(scale)为给定的scale构造一个新的面向左的轴生成器，其中带有空的刻度参数
线性

 let x = d3.scaleLinear().range([10, width-10])
 let xScale = x.domain([0, 10])

时间型

let x = d3.scaleTime().range([20, width-20])
let xScale = x.domain([new Date(2017, 1), new Date(2017, 6)])

不从零开始的非连续性x坐标轴

   let x=d3.scaleBand().range([0,width])
   let xScale =x.domain(['北京','上海','广州','深圳']) 

mounted()方法中的完整代码

let height=300;
        let width=500;
        var scale=d3.select('.scale');
        var svg=scale.append('svg')
                .attr('width',width)
                .attr('height',height)

        let x = d3.scaleLinear().range([10, width-10])
        let xScale = x.domain([0, 10])

        // let x = d3.scaleTime().range([20, width-20])
        // let xScale = x.domain([new Date(2017, 1), new Date(2017, 6)])

        // let x=d3.scaleBand().range([0,width])
        // let xScale =x.domain(['北京','上海','广州','深圳'])            
        
        var dataset=[150,60,30,80,142,230,45,25,10,23]
        let rects=svg.selectAll('myRect')
                .data(dataset)
                .enter()
                .append('rect')
                .attr('class','myRact')
                .attr('fill','skyblue')
                .attr('x',function(d,i){
                    return 10+50*i;
                })
                .attr('y',function(d){
                    return 0;
                })
                .attr('width',30)
                .attr('height',function(d){
                    return d
                })

        //x轴
        let xAxis=svg.append('g')
                .attr('class','xAxis')
                .attr('tranform',`translate(0,${height})`)
                .call(d3.axisBottom(xScale))

来源：CSDN

作者：drunk喵咪

链接：https://blog.csdn.net/jdrunk/article/details/103492272