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

随机推荐

POI导入具有合并了单元格的Excel
POI进行单行单行地导入的数据在网上有许多的文章,但是要导入一个具有合并单元格的excel貌似比较难找.刚好最近完成了这样的一个需求,要求导入具有合并单元格的excel: /** * 读取excel数 ...
如何才能成为一个合格的web前端工程师
转载原文地址:https://juejin.im/post/5cc1da82f265da036023b628 开篇前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快 ...
微信小程序代码大全 - 小程序开发福利
小程序QQ交流群:131894955 小程序开发文档(Wepy) 小程序商城源码下载(weixin-app-shop) 小程序官网源码下载(weixin-app-cms) 微信管家平台JAVA版开源下 ...
Vue相关文章
1.新手向:Vue 2.0 的建议学习顺序 2.用webstorm搭建vue项目 3.vue-cli3.0项目结构
CSS 背景图像背景图片定位
背景图片定位 background-position属性可以给背景图片定位. background-position属性有两个值,第一个值是水平位置,第二个值是垂直位置.这两个值可以使用百分比来表示( ...
Linux 基本使用
1.mkdir 创建文件夹 mkdir filename; 2.touch 创建文件 touch file.txt; 3.chmod 变更文件或目录的权限 chmod -R u+x ./;
C10K
参考 https://www.jianshu.com/p/ba7fa25d3590
窗体背景和png
窗体背景不要使用png格式图片,当窗体组件透明时,png会带来无穷的麻烦. 能不用png就不要用,截取图像也不要用Format32bppPArgb,特殊情况除外 Bitmap bkbmp = (Ima ...
uvm_scoreboard
http://www.eetop.cn/blog/index.php?uid/13812/action/viewspace/itemid/6826765/php/1 uvm_in_order_comp ...
将jar包添加到本地maven仓库中
在使用maven依赖添加jar包时,有时会遇到下载不成功的问题,这时需要将jar手动添加到本地的maven仓库中. 准备工作配置好maven的环境变量已经下载好的jar包具体过程 win + R ...

d3.js画折线图

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

随机推荐

热门专题