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控件,我这里选择 ...

随机推荐

thinkphp5.1的公共函数库 common.php
首先引入Db类或者是模型 use think\Db; 然后写公共函数 function getUserName($id){ return Db::table('zh_user')->where ...
JEECG 上传插件升级-标签
前言: 现有的uploadify上传是基于swf的,随着H5的普及,flash即将退出历史舞台,JEECG团队本着与时俱进的原则,将全面升级JEECG系统中的上传功能,采用新式上传插件plupload ...
Python OS模块，和Open函数
https://www.cnblogs.com/ginvip/p/6439679.html
Mysql分表：Merge
merge是Mysql最简单的一种分表,Mysql自带的一个分表功能,Merge表并不保存数据,Merge表和分表是对应映射关系.demo: 创建分表:CREATE TABLE `user1` ( ` ...
js生成带有logo的二维码并保存成图片下载
生成二维码,需要依赖jquery,先引入一个jquery,然后需要一个插件改变过了jquery-qrcode.js 插件代码(需要的自己打开看): /*! jquery-qrcode v0.14.0 ...
关于python的正则表达式的例子
Centos 7 docker 启动容器 iptables 报 No chain/target/match by that name
我也遇到这个问题,原因时启动docker服务时没有启动iptables服务导致的(有些docker需要再iptables开放有些端口)解决方法1.启动iptables服务 CentOS 7 以下版本 ...
python基础之socket编程
一客户端/服务器架构二 osi七层三 socket层四 socket是什么五套接字发展史及分类六套接字工作流程七基于TCP的套接字八基于UDP的套接字九粘包现象十什么是 ...
checkpoint NGFW 实验（一）
网络拓扑如下: 配置要求: a.实现LAN和DMZ区域正常访问互联网 b.映射LAN内部主机 10.158.1.1/32的RDP给外网访问,发布DMZ区域的10.133.1.100的主机的web服务到 ...
从零开始学spring cloud(十) -------- hystrix简单代码示例
一.官网文档阅读较低级别的服务中的服务故障可能导致级联故障一直到用户. 当对特定服务的调用超过circuitBreaker.requestVolumeThreshold(默认值:20个请求)且失败百 ...

d3.js画折线图

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

随机推荐

热门专题