d3.js画折线图

下载d3.zip，并解压到网页文件所在的文件夹

windows下，在命令行进入网页文件夹，输入

python -m http.server

　　在浏览器中输入127.0.0.1:8000/xxx.html

示例如下，html文件和data存在同一个目录下

https://bl.ocks.org/mbostock/3884955

<!DOCTYPE html>

<meta charset="utf-8">

<style>

path {

    stroke-width: 1;

    fill: none;

}

.axis--x {

    shape-rendering: crispEdges;

    }

.axis--x line {

    stroke: lightgrey;

    }

.axis--x .minor {

    stroke-opacity: .5;

    }    

.axis--x path {

    display: none; //draw a transparent line

}

.axis--y path {

  fill: none;

  stroke: #000;

}

.axis text {

    font-family: sans-serif;

    font-size: 8px;

}

</style>

<body>

<svg width="600" height="225"></svg>

<script src="//d3js.org/d3.v4.min.js"></script>

<script>

// basic svg setting

var svg = d3.select("svg"),

    margin = {top: 20, right: 300, bottom: 50, left: 50},

    width = svg.attr("width") - margin.left - margin.right,

    height = svg.attr("height") - margin.top - margin.bottom;

    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// set the x-axis as time axis. Do NOT use in this case.

// If you want to use this function, you can search it on-line.

//var parseTime = d3.timeParse("%Y%m%d");

//set x,y,z axis. Z axis means the twenty different color.

var x = d3.scaleLinear().range([0, width]),

    y = d3.scaleLinear().range([height, 0]),

    z = d3.scaleOrdinal(d3.schemeCategory20);

//set the outlook of x and y axis    

//define a convenience function to create a line on the chart

var line = d3.line().curve(d3.curveBasis)

    .x(function(d) { return x(d.step); })

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

//read the data from tsv and draw line chart

d3.tsv("data.tsv", type, function(error, data) {

  if (error) throw error;

  var cities = data.columns.slice(1).map(function(id) {  //id means the name of city

    return {

      id: id,

      values    : data.map(function(d) {

        return {step: d.step, temperature: d[id]};

      })

    };

  });

  //further set x-axis and y-axis

  x.domain(d3.extent(data, function(d) { return d.step; }));

  y.domain([0,300]);

  z.domain(cities.map(function(c) {    return c.id; }));

  var xAxis = d3.axisBottom(x).scale(x).tickSize(-height);

  var yAxis = d3.axisLeft(y).scale(y).ticks(10);

// X-AXIS LABEL

  g.append("g")

      .attr("class", "axis axis--x")

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

      .call(xAxis)

      .append("text")

      .attr("x", width/2)

      .attr("y", 18)

      .style("text-anchor", "middle")

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

      .style("font-weight", "bold")

      .text("x-axis label");

// Y-AXIS LABEL

  g.append("g")

      .attr("class", "axis axis--y")

      .attr("transform", "translate(-15,0)")

      .call(d3.axisLeft(y).ticks(4))

      .append("text")

      .attr("x", -(height/2))

      .attr("y", -29)

      .attr("dy", "0.32em")

      .attr("transform", "rotate(-90)")

      .style("text-anchor", "middle")

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

      .style("font-weight", "bold")

      .text("y-axis label");

// ADD TITLE

  g.append("text")

      .attr("class", "title")

      .attr("x", width/2)

      .attr("y", 5 - (margin.top/2))

      .attr("text-anchor", "middle")

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

      .style("font", "8px sans-serif")

      .style("font-weight", "bold")

      .text("TITLE");      

  var city = g.selectAll(".city")

    .data(cities)

    .enter().append("g")

    .attr("class", "city");

//Draw the line and set the legend on the right of the chart ONE BY ONE

for (var i=0;i<cities.length-1;i++){

// DRAW THE LINE

  city.append("path")

      .attr("class", "line")

      .attr("d", function(d) { return line(cities[i].values); })

      .style("stroke", z(cities[i].id));  //color

//settting of legend

  var w = 10,  //the vertical distance between neighbouring legend

      l = -20,  //left-most distance of the legend

      r = 0,  //right-most distance of the legend

      t = -10;  // up-most distance of the legend

// draw the legend on the right of the chart

  city.append("text")

      .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })

      .attr("transform", "translate(" + (margin.left + width +r) + ","

            + (w*i + margin.top + height/2 - w*cities.length/2 + t)

            + ")")

      .attr("x", 3)

      .attr("dy", "0.35em")

      .style("font", "8px sans-serif")

      .text(cities[i].id);

// draw the short line of legend to identify each line in the line chart

    city.append("line")

                .attr("class", "line dataset-" + 0)

                .style("stroke", z(cities[i].id))

                .attr("stroke-width", "2")

                .attr("x1", margin.left + width + l)

                .attr("x2", margin.left + width + r)

                .attr("y1", w*i + margin.top + height/2 -

                            w*cities.length/2 + t)

                .attr("y2", w*i + margin.top + height/2 -

                            w*cities.length/2 + t);

      }

//In this case, a unique line chart need to be underscored.

//So, I draw the unique line separately with black.

  var i = 3;  //the unique line is the 3rd coloum

  city.append("path")

      .attr("class", "line")

      .attr("d", function(d) { return line(cities[i].values); })

      .style("stroke", "#000000");

  city.append("text")

      .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })

      .attr("transform", "translate(" + (margin.left + width + r) + ","

            + (w*i + margin.top + height/2 - w*cities.length/2 + t)

            + ")")

      .attr("x", 3)

      .attr("dy", "0.35em")

      .style("font", "8px sans-serif")

      .text(cities[i].id);

    city.append("line")

                .attr("class", "line dataset-" + 0)

                .style("stroke","#000000")

                .attr("stroke-width", "2")

                .attr("x1", margin.left + width + l)

                .attr("x2", margin.left + width + r)

                .attr("y1", w*i + margin.top + height/2 -

                            w*cities.length/2 + t)

                .attr("y2", w*i + margin.top + height/2 -

                            w*cities.length/2 + t);

    });

//get the tsv file data

function type(d, _, columns) {

  d.step = +d.step;

  for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];

  return d;

}

</script>

</body>

d3.js画折线图的更多相关文章

echars画折线图的一种数据处理方式
echars画折线图的一种数据处理方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
python中matplotlib画折线图实例（坐标轴数字、字符串混搭及标题中文显示）
最近在用python中的matplotlib画折线图,遇到了坐标轴 "数字+刻度" 混合显示.标题中文显示.批量处理等诸多问题.通过学习解决了,来记录下.如有错误或不足之处,望请指 ...
SAS 画折线图PROC GPLOT
虽然最后做成PPT里的图表会被要求用EXCEL画,但当我们只是在分析的过程中,想看看数据的走势,直接在SAS里画会比EXCEL画便捷的多. 修改起来也会更加的简单,,不用不断的修改程序然后刷新EXCE ...
Matplotlib学习---用matplotlib画折线图（line chart）
这里利用Jake Vanderplas所著的<Python数据科学手册>一书中的数据,学习画图. 数据地址:https://raw.githubusercontent.com/jakevd ...
使用OpenCV画折线图
使用OpenCV画直方图是一件轻松的事情,画折线图就没有那么Easy了,还是使用一个库吧: GraphUtils 源代码添加入工程原文链接:http://www.360doc.com/content ...
D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决
上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...
D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
D3.js画思维导图（转）
思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...
用D3.js画树状图
做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同网上有很多这种数据可视化展示的js控件,我这里选择 ...

随机推荐

Mysql将查询结果合并为一列
利用函数:group_concat(),实现一个ID对应多个名称时,原本为多行数据,把名称合并成一行. 完整的语法如下: group_concat([DISTINCT] 要连接的字段 [Order B ...
Java爬虫——常用的maven依赖
java实现爬虫常用的第三方包: httpclient,for http jsoup,for dom rhino,for js jackson,for json pom.xml摘录 <depen ...
windown 下最简单的安装mysql方式
最近自己的mysql要升级,需要重新安装mysql,官网有提供傻瓜式的安装方式.. 记得下载.msi的格式.这个安装最简单.
fair scheduler配置
<property> <name>yarn.resourcemanager.scheduler.class</name> <value>or ...
MFC列表控件更改一行的字体颜色
参考自(http://blog.csdn.net/ribut9225/article/details/6720639) 1．首先从CListCtrl 继承一个类,命名为CListCtrlCl 在头文件 ...
《转》完美解决微信video视频隐藏控件和内联播放问题
地址:https://blog.csdn.net/xiao190128/article/details/81025378 var u = navigator.userAgent; var isAndr ...
ERROR: 9-patch image C:\...\res\drawable\appwidget.9.png malformed. Frame pixels must be either solid or transparent (not intermediate alphas).
this is the problem with latest adt that is 20.0.3. you can instead rename the *.9.png to *.png and ...
JDK、CGlib动态代理详解
Java动态代理之JDK实现和CGlib实现(简单易懂) 一 JDK和CGLIB动态代理原理 1.JDK动态代理利用拦截器(拦截器必须实现InvocationHanlder)加上反射机制生 ...
生成器函数yield
先看一个栗子: # -*- coding:UTF-8 -*- __autor__ = 'zhouli' __date__ = '2018/12/6 21:08' # 生成器函数,函数里只要有yield ...
机器学习入门：Linear Regression与Normal Equation -2017年8月23日22:11:50
本文会讲到: (1)另一种线性回归方法:Normal Equation: (2)Gradient Descent与Normal Equation的优缺点: 前面我们通过Gradient Desce ...

d3.js画折线图

d3.js画折线图的更多相关文章

随机推荐

热门专题