利用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. SimpleMDE编辑器 + 提取HTML + 美化输出

    开发步骤: 1. 安装和引入(npm或者bower都可以) $ bower install simplemde --save //css - debug目录下为开发版本 <link rel=&q ...

  2. Nginx负载均衡的实现（初级）

    不用nginx.conf,新建一个 fzjh.conf (名称自定义) 内容如下: user nobody; # 声明用户为nobody worker_processes 4; # 开启的nginx ...

  3. P4342 [IOI1998]Polygon

    题意翻译 题目可能有些许修改,但大意一致 多边形是一个玩家在一个有n个顶点的多边形上的游戏,如图所示,其中n＝4.每个顶点用整数标记,每个边用符号+(加)或符号*(乘积)标记. 第一步,删除其中一条边 ...

  4. POJ3585 Accumulation Degree 【树形dp】

    题目链接 POJ3585 题解 -二次扫描与换根法- 对于这样一个无根树的树形dp 我们先任选一根进行一次树形dp 然后再扫一遍通过计算得出每个点为根时的答案 #include<iostream ...

  5. BZOJ1565 [NOI2009]植物大战僵尸 【最大权闭合子图 + tarjan缩点(或拓扑)】

    题目 输入格式 输出格式 仅包含一个整数,表示可以获得的最大能源收入.注意,你也可以选择不进行任何攻击,这样能源收入为0. 输入样例 3 2 10 0 20 0 -10 0 -5 1 0 0 100 ...

  6. NOIP2017年11月9日赛前模拟

    最后一次NOIP模拟了····· 题目1:回文数字 Tom 最近在研究回文数字. 假设 s[i] 是长度为 i 的回文数个数(不含前导0),则对于给定的正整数 n 有:

  7. CF10D LCIS (动态规划)

    题目链接 Solution 动态规划. 令 \(f_{i,j}\) 表示 \(a\) 数组前 \(i\) 个和 \(b\) 数组前 \(j\) 所得的最长的 LCIS . 转移很好想: \(a_i!= ...

  8. 02 Java 基础语法

    在开始 Java 基本语法之前,先说明 Java 程序的基本规范: 大小写敏感,例如 Person 和 person 是不同的 类名首字母大写,如果类名由多个单词组成,每个单词首字母都大写,例如 He ...

  9. windows 系统下TortoiseGit 的安装

    git 常用的使用工具: Windows 支持下载安装TortoiseGit Mac 下 推荐使用 sourcetree Windows下的 TortoiseGit 安装 1. 进入 小乌龟官网 To ...

  10. 为Ubuntu Gnome环境创建桌面快捷方式

    为Ubuntu Gnome环境创建桌面快捷方式 安装gnome-panel包 sudo apt-get install --no-install-recommends gnome-panel 启动终端 ...