d3.js学习10----折线图的制作

一切尽在注释中………………

<!DOCTYPE html>

<html>

<head>

<title>ZheXian</title>

</head>

<body>

</div>

<scripttype="text/javascript">

var dataset=[5,3,1,5,2,4,2];

varxMarks=['Mon','Tues','Wed','Thur','Fri','Sat','Sun'];

var w=600;

var h=400;

var title="Beijing";

var subTitle="temperature";

//定义画布

var svg=d3.select("body")

.append("svg")

.attr("width",w)

.attr("height",h);

//添加标题

svg.append("g")

.append("text")

.text(title)

.attr("class","title")

.attr("x",220)

.attr("y",20);

//添加副标题

svg.append("g")

.append("text")

.text(subTitle)

.attr("class","subTitle")

.attr("x",220)

.attr("y",40);

//横坐标轴比例尺

var xScale = d3.scale.linear()

.domain([0,dataset.length-1])

.range([60,400]);//这个range相当于横轴的左右平移

//纵坐标轴比例尺

var yScale = d3.scale.linear()

.domain([0,d3.max(dataset)])

.range([220,60]);

//定义横轴网格线

var xInner = d3.svg.axis()

.scale(xScale)

.tickSize(-160,0,0)//调整网格线长度

.orient("bottom")

.ticks(dataset.length);

//添加横轴网格线

svg.append("g")

.attr("class","inner_line")

.attr("transform","translate(0," + 220 + ")")

//用来把纵的网格线上移的

.call(xInner)

.selectAll("text")

.text("");

//定义纵轴网格线

var yInner = d3.svg.axis()

.scale(yScale)

.tickSize(-340,0,0)

.tickFormat("")

.orient("left")

.ticks(5);

//添加纵轴网格线

var yBar=svg.append("g")

.attr("class","inner_line")

.attr("transform","translate("+60+",0)")

.call(yInner);

//定义横轴

var xAxis = d3.svg.axis()

.scale(xScale)

.orient("bottom")

.ticks(dataset.length);

//添加横坐标轴并通过编号获取对应的横轴标签

var xBar=svg.append("g")

.attr("class","axis")

.attr("transform","translate(0," + 220 + ")")//用来上下平移横轴位置

.call(xAxis)

.selectAll("text")

.text(function(d){return xMarks[d];});

//定义纵轴

var yAxis = d3.svg.axis()

.scale(yScale)

.orient("left")

.ticks(5);//这个是细分度

//添加纵轴

var yBar=svg.append("g")

.attr("class", "axis")

.attr("transform","translate("+60+",0)")

.call(yAxis);

//添加折线

var line = d3.svg.line()

.x(function(d,i){return xScale(i);})

.y(function(d){return yScale(d);});

var path=svg.append("path")

.attr("d", line(dataset))

.style("fill","#F00")

.style("fill","none")

.style("stroke-width",1)

.style("stroke","#09F")

.style("stroke-opacity",0.9);

//添加系列的小圆点

svg.selectAll("circle")

.data(dataset)

.enter()

.append("circle")

.attr("cx", function(d,i) {

return xScale(i);

})

.attr("cy", function(d) {

return yScale(d);

})

.attr("r",5)

.attr("fill","#09F");

</script>

</body>

</html>

Css文件代码：

body{

height: 100%;

}

.title{font-family:Arial,微软雅黑;font-size:18px;text-anchor:middle;}

.subTitle{font-family:Arial,宋体;font-size:12px;text-anchor:middle;fill:#666}

.axis path,

.axis line {

fill: none;

stroke: black;

shape-rendering: crispEdges;

}

.axis text {

font-family: sans-serif;

font-size: 11px;

fill:#999;

}

.inner_line path,

.inner_line line {

fill: none;

stroke:#E7E7E7;

shape-rendering: crispEdges;

}

d3.js学习10----折线图的制作相关推荐

d3.js实现力导向图圈选框选
#d3.js实现力导向图圈选框选今天给大家带来的是如何在2D可视化图形中加入通过鼠标拖动圈选功能,以力导向图为例. ##最终效果 demo跳转 ##代码解析我们是要在节点的上方绘制一个矩形覆盖节点 ...
Unity3D开发之折线图的制作（二）
一年前写过一篇折线图的制作,当时显示效果还可以,只不过因为之前刚接触写博客,所以写的内容不是很完善,加上比较忙,都是草率记录的,代码结构也不是很好.昨天我又把这个项目的代码熟悉了一遍,然后把代码更改精 ...
d3.js实现股权穿透图(vue+d3.js)
d3.js实现股权穿透图业务需求 1.实现的效果图 2.安装依赖 3.全部代码(复制粘贴即可实现) 参考git地址业务需求前段时间写过一篇使用relation-graph插件实现的股权穿透图效果 ...
flot.js ajax,jquery.flot.js简单绘制折线图用法示例
本文实例讲述了jquery.flot.js简单绘制折线图用法.分享给大家供大家参考,具体如下: 1.完整实例代码: 折线图 $(function() { AlPriceQuery(); }); fun ...
原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...
pyecharts查看版本_pyecharts v1 版本学习笔记折线图,面积图
折线图折线图基本demo import pyecharts.options as opts from pyecharts.charts import Line c = ( Line() .add_ ...
【D3.js 学习总结】12、D3布局-集群图
d3.layout.cluster() 集群图是一种用于表示包含与被包含关系的图表. 集群图(Cluster)的API说明 cluster.children - 取得或者设置子节点的访问器函数. cl ...
饼状图的实现方法html,D3.js实现饼状图的方法详解
前言小编在之前已经跟大家分享过关于怎样用柱状图和折线图这两种基本图表.这两种图表都是有坐标轴的,现在来说一种没有坐标轴的图表--饼图. 饼状图实现还是和之前一样,我们先把简单的画图框架搭起来,添加 ...
用D3.js画树状图
做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同网上有很多这种数据可视化展示的js控件,我这里选择 ...
D3.js实现力导向图(Dray和Zoom)
今天遇到个问题就是把json(里面nodes和edges属性)文件通过D3.js展示出来,下午终于弄出来了,写篇博客记录一下. 先展示一下效果图: 放大后是这个效果: 什么是力导向图 D3.js官网: ...

d3.js学习10----折线图的制作

d3.js学习10----折线图的制作相关推荐

最新文章

热门文章