d3.js入门

2017-10-26 本文已影响0人 miner敏儿

本来一直是使用echarts来画图的,结果画好了以后,公司又要使用d3来画,没有对它进行特别的深入,只是了解了一下,能完成需求.
还有就是虽然有d3的官网可以学习,但是我不翻墙的话网站基本上是没办法进去的 ,为了以后可以方便的使用d3的一些东西,我觉得自己有必要把它写下来.
先看效果图

image.png

是不是感觉和echarts画出来的一毛一样,我也这么觉得......下次再研究两者有啥区别吧.

代码直接贴过来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            background-color: #ddd;
            width: 500px;
            height: 350px;
        }
        path{
            fill: none;
            stroke: #4682B4;
            stroke-width: 2 ;
        }
        .domain,.tick line{
            stroke: gray;
            stroke-width: 1;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="d3.js"></script>
<script>
    var width = 500,
        height = 300,
        margin = {left:50,top:30,right:20,bottom:20},
        g_width = width-margin.left-margin.right,
        g_height = height-margin.top-margin.bottom;
    var svg = d3.select("#container")
        .append("svg")
        .attr("width",width)
        .attr("height",height)
    var g = d3.select("svg")
        .append("g")
       .attr("transform","translate("+margin.left+","+margin.top+")")
    var dataset = [
        {x: 0, y: 11}, {x: 1, y: 35},
        {x: 2, y: 23}, {x: 3, y: 78},
        {x: 4, y: 55}, {x: 5, y: 18},
        {x: 6, y: 98}, {x: 7, y: 100},
        {x: 8, y: 22}, {x: 9, y: 65}
    ];

    var scale_x = d3.scale.linear()
        .domain(d3.extent(dataset, function(d) {
            return d.x;
        }))
        .range([0,g_width])
    var scale_y = d3.scale.linear()
        .domain([0, d3.max(dataset,function(d) {
            return d.y;
        })])
        .range([g_height,0])
    var x_axis = d3.svg.axis().scale(scale_x),
        y_axis = d3.svg.axis().scale(scale_y).orient("left");
    g.append("g")
        .call(x_axis)
        .attr("transform","translate(0,"+g_height+")")
    g.append("g")
        .call(y_axis)
        .append("text")
        .text("Price($)")
        .attr("transform","rotate(-90)")
        .attr("text-anchor","end")
        .attr("dy","1em")

     //绘制曲线
        var line_generator = d3.svg.line()
            .x(function(d){
                return scale_x(d.x);
            })
            .y(function(d){
                return scale_y(d.y);
            })
       
            .interpolate("cardinal");
        d3.select("g")
            .append("path")
            .attr("d",line_generator(dataset))
</script>
</body>

上面的代码同样html css js三部分

HTML部分


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     css代码
</head>
<body>
<div id="container"></div>

<script src="d3.js"></script>
<script>
      js代码
</script>
</body>

css部分

    <style>
        #container{
            background-color: #ddd;
            width: 500px;
            height: 350px;
        }
        path{
            fill: none;//可以对曲线进行填充色
            stroke: #4682B4;/*曲线的颜色*/
            stroke-width: 2 ;/*曲线的宽度*/
        }
        .domain,.tick line{/*刻度尺的样式*/
            stroke: gray;
            stroke-width: 1;
        }
    </style>

path 是对曲线进行的一系列样式设置

JS部分

0 模拟数据

   var dataset = [
        {x: 0, y: 11}, {x: 1, y: 35},
        {x: 2, y: 23}, {x: 3, y: 78},
        {x: 4, y: 55}, {x: 5, y: 18},
        {x: 6, y: 98}, {x: 7, y: 100},
        {x: 8, y: 22}, {x: 9, y: 65}
    ];

1 设置图表大小:首先要设置画布的大小,然后用margin来存储图表的边距信息,计算出图表的宽度和高度

 var width = 500,
        height = 300,
        // SVG画布边缘与图表内容的距离
        margin = {left:50,top:30,right:20,bottom:20},
        g_width = width-margin.left-margin.right,
        g_height = height-margin.top-margin.bottom;

2 添加画布

 //svg  // 创建一个分组用来组合要画的图表元素
    var svg = d3.select("#container")
        .append("svg")
        //属性：宽、高
        .attr("width",width)
        .attr("height",height)
    //g元素
    var g = d3.select("svg")
        .append("g")
        // // 设置该分组的transform属性
        .attr("transform","translate("+margin.left+","+margin.top+")")

d3.select("#container")选择container元素.往这个里面添加一个子元素"svg".,给这个svg设定一些属性，再往“svg”中添加一个”g”元素并设定一些属性。

3 设置横轴方向和纵轴方向的区域（Domains）和范围（Ranges）
画布添加好了可是我要怎么画呢 ?首先要确定定义域和值域

 //设置比例缩放
    //创建x轴的比例尺(线性比例尺)
    var scale_x = d3.scale.linear()//创建了线性比例尺
        .domain(d3.extent(dataset, function(d) {//定义定义域
            return d.x;
        }))
        .range([0,g_width])//定义值域
    // 创建y轴的比例尺(线性比例尺)
    var scale_y = d3.scale.linear()
        .domain([0, d3.max(dataset,function(d) {//定义定义域
            return d.y;
        })])
        .range([g_height,0])//定义值域

这段代码是为了让我们导入的数据与图表的大小相适应，range知道是图表范围的大小，他是一个尺寸大小。这段代码告诉D3我们要画些东西在x轴上，这些东西是时间/日期的一个实体。

而domain指的是数据的区域，extent返回的是最小的x或y到最大的x或y这样一个跨度，所以，最小的x或y就对应于上面range的最小值0

对于y轴的值域,g_height 表示的是当数据为最大值即“8”的时候，输出最高点为g_height。这里要注意由于浏览器从左到右、从上到下的坐标系数值是逐渐增到，因此我们将range的值设成[g_height，0]即可实现整一个的翻转
//，因为SVG画布的y轴与传统认知上的y轴的方向是反着来的，所以在定义y轴的定义域和值域对应关系时，也需要反着来

4 设置x,y坐标轴
设置好坐标比例问题,就要开始创建坐标轴,添加坐标轴函数:axis()

  //创建x轴 添加坐标轴函数：axis（）
    var x_axis = d3.svg.axis().scale(scale_x),
        // 创建y轴
        y_axis = d3.svg.axis().scale(scale_y).orient("left").ticks(5);;

坐标轴axis初始化方法通过d3.svg.axis()来调用，然后调用.scale(scale_x)用前面定义的scale_x来给坐标轴设定刻度， .orient()设定刻度相对坐标轴的位置，.ticks()告诉D3在坐标轴上设定差不多几个刻度就够了，比方说你要D3给你的Y轴设定大概20个刻度 y_axis = d3.svg.axis().scale(scale_y).orient("left").ticks(20);

image.png

5 添加x,y坐标轴
既然比例设置好了,坐标轴也设置好了,画布也添加完成了,那么就先把坐标轴画出来

    //依次添加X、Y坐标轴,并通过偏移量的设置使得X坐标轴往下移
    // 添加SVG元素并与x轴进行“绑定”
    g.append("g")
        .call(x_axis)
        .attr("transform","translate(0,"+g_height+")")
    // 添加SVG元素并与y轴进行“绑定”
    g.append("g")
        .call(y_axis)
        .append("text")
        .text("Price($)")
        .attr("transform","rotate(-90)")
        .attr("text-anchor","end")
        .attr("dy","1em")

6 绘制曲线
什么都准备好了,就可以绘制曲线了

//绘制曲线
        var line_generator = d3.svg.line()
            .x(function(d){
                return scale_x(d.x);
            })
            .y(function(d){
                return scale_y(d.y);
            })
            // 选择线条的类型
            .interpolate("cardinal");
    // 添加path元素，并通过line_generator()计算出值来赋值
        d3.select("g")
            .append("path")
            .attr("d",line_generator(dataset))

这样,一个曲线图就完成啦 !!

如果想在曲线上添加点的话,就加入下面的代码

d3.select("g").selectAll('circle')
        .data(dataset)
        .enter()
        .append('circle')
        .attr('cx', function(d) {
            return scale_x(d.x);
        })
        .attr('cy', function(d) {
            return scale_y(d.y);
        })
        .attr('r', 3)
        .attr('fill', function(d) {
            return "white";
        });

这样画出来的曲线图就有点啦

image.png

有曲线图当然也有面积图 ,如果你想绘制面积图表,注意需要三个参数,y0将原来的线型图变成了封闭的面积图咯将上述步骤6中绘制曲线的代码直接换成一下代码就可以实现了

 var myArea = d3.svg.area()
            .x(function (d) {
                return scale_x(d.x)
            })
            .y0(g_height)
            .y1(function(d){
                return scale_y(d.y)
            })
            .interpolate("cardinal")

        d3.select("g")
            .append("path")
            .attr("d",myArea(dataset))
            .style("fill","pink")

image.png

完成了这些基本上就可以应付一些简单的d3画图啦

官网:http://www.w3.org
不过我老是访问不了汗(⊙﹏⊙)b!!!

d3.js入门

HTML部分

css部分

JS部分

猜你喜欢

热点阅读