d3画图表

一时失言乱红尘 2022-06-05 22:22 241阅读 0赞

##### d3画图表的教程好少， 从极客学院上看到了[http://wiki.jikexueyuan.com/project/d3wiki/][http_wiki.jikexueyuan.com_project_d3wiki] 但是它这是v3的，我用的是v4，有些东西居然不一样了 #####

### 选择标签， 给标签赋值 ###

选择单个标签

*  直接通过标签获取元素  
    var p = d3.select(“p”)  
    
 *  通过id获取  
    var p = d3.select(“\#myp”)  
    
 *  通过class获取  
    var p = d3.select(“.myp”)  
    
 *  为单个标签设值  
    p.text(“hello”)
 *  --------------------
    
    选择所有p标签  
    var p = body.selectAll(‘p’)
    
    为所有标签设值  
    1.使用datum()
    
        p.datum(str) //与p标签进行绑定
        p.text(function(d){  //d表示通过 datum绑定的值
            return  d;
        });
    
    函数还可以这么写
    
        p.datum(str) //与p标签进行绑定
        p.text(function(d, i){  //d表示通过 datum绑定的值，i 表示 当前的第几个p
            return  "第"+i+"个值"+d;
        });
    
    2.使用data()
    
        //使用datas数组值挨个赋值给p标签
        var datas = ['var1','var2','var3'];
        p.data(datas)
        .text(function(d, i){ 
            return d;
        })
    
    ### 给标签设置style ###
    
        var p = d3.select("p")
        p.style("color","red")
        .style("font-size","70px")  //链式选择， 还是属于p的设置
    
    ### 插入元素 ###
    
    1.append()  
    在body的最后添加一个p标签
    
        var body = d3.select("body")
        body.append("p")
        .text("new p");
    
    2.insert()  
    在body中 选择在id为p4的标签的前面插入一个p标签
    
        body.insert("p","#p4").text("insert p")
    
    ### 删除元素 ###
    
    remove()
    
        //把id为p2的移除
        var p2 = d3.select("#p2");
        p2.remove()
    
    ### 画直方图 ###
    
        var width = 300;  //画布的宽度
        var height = 300;   //画布的高度
        
        
        var svg = d3.select("body")     //选择文档中的body元素
            .append("svg")          //添加一个svg元素
            .attr("width", width)       //设定宽度
            .attr("height", height);    //设定高度
        var dataset = [ 123 , 221 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）
        
        var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
        //x 20, y 25增长， w来自数据 h23 
        
        
        svg.selectAll("rect") //选择svg内的矩形
            .data(dataset) //绑定数组
            .enter()
            .append("rect") //添加到svg
                //设置属性,
            .attr("x",20)
            .attr("y",function(d,i){ 
                 return i * rectHeight; //计算第几个柱子的y坐标位置
            })
            .attr("width",function(d){ 
                 return d;
            })
            .attr("height",rectHeight-10)
            .attr("fill","steelblue"); //填充
    
    ### 比例尺 ###
    
    将数组的值按照比例规划
    
        var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
        
        var min = d3.min(dataset); //数组中最大的 3.3
        var max = d3.max(dataset); //最小的 0.9
        
        //domain相当于定义域， range相当于值域
        var linear = d3.scaleLinear().domain([min,max]).range([0,300]);  
        
        alert(linear(0.9))    //返回 0
        alert(linear(2.3))    //返回 175
        alert(linear(3.3))    //返回 300
    
    #### 序列比例尺: ####
    
    两个数组进行值的对应
    
        var index = [0, 1, 2, 3, 4];
        var color = ["red", "blue", "green", "yellow", "black"];
        
        var ordinal = d3.scaleOrdinal()
                .domain(index)
                .range(color);
        
        alert(ordinal(0)); //返回 red
        alert(ordinal(2)) //返回 green
        alert(ordinal(4)) //返回 black
    
    #### 使用比列尺画直方图 ####
    
        var width = 300;  //画布的宽度
        var height = 300;   //画布的高度
        
        
        var svg = d3.select("body")     //选择文档中的body元素
            .append("svg")          //添加一个svg元素
            .attr("width", width)       //设定宽度
            .attr("height", height);    //设定高度
        
        var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
        
        var linear = d3.scaleLinear()
                .domain([0, d3.max(dataset)])
                .range([0, 250]);
        
        var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
        
        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x",20)
            .attr("y",function(d,i){ 
                 return i * rectHeight;
            })
            .attr("width",function(d){ 
                 return linear(d);   //在这里用比例尺
            })
            .attr("height",rectHeight-2)
            .attr("fill","steelblue");
    
    ### 带坐标轴的直方图 ###
    
        var width = 300;  //画布的宽度
        var height = 300;   //画布的高度
        
        
        var svg = d3.select("body")     //选择文档中的body元素
            .append("svg")          //添加一个svg元素
            .attr("width", width)       //设定宽度
            .attr("height", height);    //设定高度
        
        var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
        
        var linear = d3.scaleLinear()
                .domain([0, d3.max(dataset)])
                .range([0, 250]);
        
        var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
        
        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x",20)
            .attr("y",function(d,i){ 
                 return i * rectHeight;
            })
            .attr("width",function(d){ 
                 return linear(d);   //在这里用比例尺
            })
            .attr("height",rectHeight-2)
            .attr("fill","steelblue");
        alert(12)
        var axis = d3.axisBottom()
                    .scale(linear)      //指定比例尺
                    .ticks(7);          //指定刻度的数量
        
        svg.append("g")
            .attr("transform","translate(20, 140)") //调整位置
            .call(axis);

[http_wiki.jikexueyuan.com_project_d3wiki]: http://wiki.jikexueyuan.com/project/d3wiki/