d3.js入门学习

来源：互联网发布：linux搭建jenkins svn 编辑：程序博客网时间：2024/05/22 00:41

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

是不是感觉和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);

- 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";        });

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

有曲线图当然也有面积图 ,如果你想绘制面积图表,注意需要三个参数,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")

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

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

阅读全文

0 0