利用D3.js库实现Focus+Context的折线图。读取data.tsv文件数据

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style> svg {
font: 10px sans-serif;
} .axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
} .line {
fill: none;
clip-path: url(#clip); //将多余的超出坐标系范围的线段裁剪掉
stroke: steelblue;
stroke-width: 1.5px;
} .brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
} </style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script> var margin = {top: 10, right: 10, bottom: 100, left: 40},
margin2 = {top: 430, right: 10, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
height2 = 500 - margin2.top - margin2.bottom; var color = d3.scale.category10(); var parseDate = d3.time.format("%Y%m%d").parse; var x = d3.time.scale().range([0, width]),
x2 = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]),
y2 = d3.scale.linear().range([height2, 0]); var xAxis = d3.svg.axis().scale(x).orient("bottom"),
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left"); var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.temperature);}); var line2 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x2(d.date); })
.y(function(d) { return y2(d.temperature); }); var brush = d3.svg.brush()
.x(x2)
.on("brush", brushed); var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom); svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height); var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")"); d3.tsv("data.tsv", function(error, data) { color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); data.forEach(function(d) {
d.date = parseDate(d.date);
}); var cities = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, temperature: +d[name]};
})
};
}); x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
]); x2.domain(x.domain());
y2.domain(y.domain()); var city = focus.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city"); city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); }); focus.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis); focus.append("g")
.attr("class", "y axis")
.call(yAxis); var city2 = context.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city"); city2.append("path")
.attr("class", "line")
.attr("d", function(d) { return line2(d.values); })
.style("stroke", function(d) { return color(d.name); }); context.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2); context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7); }); function brushed() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.selectAll(".line").attr("d", function(d) { return line(d.values); });
focus.select(".x.axis").call(xAxis);
} </script>

效果图 例如以下:

【D3.js】Focus + Context 折线图的更多相关文章

  1. 原生JS实现动态折线图

    原生JS实现动态折线图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  2. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  3. 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

    超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...

  4. D3.js画思维导图(转)

    思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...

  5. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

  6. d3.js 实现立体柱图

    前言 随着大数据时代的来临,数据可视化的重要性也越来越凸显,那么今天就基于d3.js今天给大家带来可视化基础图表柱图进阶:立体柱图 关于d3.js d3.js是一个操作svg的图表库,d3封装了图表的 ...

  7. vue项目中基于D3.js实现桑基图功能

    前端实现数据可视化的方案有很多种,以前都是使用百度的echarts,使用起来很方便,直接按照特定的数据格式输入,就能实现相应的效果,虽然使用方便,但是缺点就是无法自定义一些事件操作,可自由发挥的功能很 ...

  8. D3.js:饼状图的制作

    假设有如下数据需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度, ...

  9. Vue和d3.js(v4)力导向图force结合使用,v3版本升级v4【一】

    前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...

随机推荐

  1. XJOI NOIP模拟题1

    第一题 分析: 开始想的是贪心,取每列均值最大一段. 应该是01分数规划,具体看代码 代码: program gold; var a:..]of int64; n,i,m,j,x:longint; f ...

  2. hdu 1811 Rank of Tetris (拓扑 & 并查集)

    Rank of Tetris Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  3. [SQL Server]关于标识列,标识从1开始计数的的方法

    DBCC CHECKIDENT ('表名',  RESEED, 0) //从30开始 DBCC  CHECKIDENT  (jobs,  RESEED,  30)

  4. P2507 [SCOI2008]配对

    题目背景 四川NOI2008省选 题目描述 你有 n 个整数Ai和n 个整数Bi.你需要把它们配对,即每个Ai恰好对应一个Bp[i].要求所有配对的整数差的绝对值之和尽量小,但不允许两个相同的数配对. ...

  5. [BZOJ3196] 二逼平衡树 [权值线段树套位置平衡树]

    题面 洛咕题面 思路 没错我就是要不走寻常路! 看看那些外层位置数据结构,必须二分的,$O(n\log^3 n)$的做法吧! 看看那些cdq分治/树状数组套线段树的,空间$O(n\log^2 n)$挤 ...

  6. 新blog开张!

    以后不出意外就只在新的blog更新了! hexo搭建的新blog 然后的然后是继续奋斗!

  7. WebSocket贪吃蛇例子学习

    在Tomcat7.0.64下的examples文件夹内,有多人贪吃蛇的例子. Multiplayer snake 这是一个多人在线小游戏,客户端通过操作上下左右键指挥自己的蛇,如果碰到别的蛇就死掉.还 ...

  8. (原创)Linux下MySQL 5.5/5.6的修改字符集编码为UTF8(彻底解决中文乱码问题)

    « CloudStack+XenServer详细部署方案(10):高级网络功能应用 (总结)CentOS Linux 5.x在GPT分区不能引导的解决方法 » 2013-1 11 (原创)Linux下 ...

  9. poj1039 Pipe(计算几何叉积求交点)

    F - Pipe Time Limit:1000MS     Memory Limit:10000KB     64bit IO Format:%I64d & %I64u Submit Sta ...

  10. sql id 或使用nolock

    qlserver 批量插入记录时,对有标识列的字段要设置 set IDENTITY_INSERT 表名 on,然后再执行插入记录操作;插入完毕后恢复为 off 设置 格式:  set IDENTITY ...