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

随机推荐

Python初学(1)
最近在学习python,以后想编写一些工作中用的到的脚本.python的入门我选择了<python从初学到入门>,这篇文章我会跟进我的学习进度.算是一个笔记吧. 我本身是熟悉C语言的,看p ...
mysql添加外键无法成功的原因
最近很忙,碰到很多问题都忘了发上来做个记录,现在又忘了,FUCK,现在碰到一个问题, 就是mysql添加外键总是无法成功,我什么都试了,就是没注意signed和unsigned,FUCK,因为我用my ...
java高并发实战（三）——Java内存模型和线程安全
转自:https://blog.csdn.net/gududedabai/article/details/80816488
进制与进制转换DAY2
进制和进制转换一.进制的基础 1.十进制(案例) 系数:0-9 进位规则:逢十进一权:基数的次幂基数:几进制基数就是几规律:右侧第一位的权是10的0次幂,每向左移动一位次幂会+1. 进制的表示 ...
js常用身份校验规则
js常用身份校验规则 var Validator = { extractBirth: function(id) { // 身份证提取出生年月 var re = null, split, year, m ...
[GNU] 喝一杯咖啡, 写一写 Makefile
Makefile 是 Linux 下组织程序的一个工具,它的命令是 make. (首字母M/m都可以) [Makefile] Makefile 编写的主旋律: target: [dependency] ...
PeopleSoft JobSet Schedule Table
PS_SCHDLDEFNPS_SCHDLITEMPS_SCHDLNODEPARMPS_SCHDLNOTIFYPS_SCHDLMESSAGE 其中,PS_SCHDLDEFN中SCHEDULESTATUS ...
Spring再接触自动装配
UserDaoImpl package com.bjsxt.dao.impl; import com.bjsxt.dao.UserDAO; import com.bjsxt.model.User; p ...
2019 AI CITY CHALLENGE
官网: https://www.aicitychallenge.org/ 基于来自交通,信号系统,基础设施和运输的传感器数据,存在使运输系统更智能的巨大机会.不幸的是,由于几个原因,进展受到限制 ...
Python学习—数据库篇之pymysql
一.pymysql简介对于Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymsql是Python中操作MySQL的模块,其使用方法和MySQ ...

d3.js画折线图

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

随机推荐

热门专题