下载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画折线图的更多相关文章

  1. echars画折线图的一种数据处理方式

    echars画折线图的一种数据处理方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  2. python中matplotlib画折线图实例（坐标轴数字、字符串混搭及标题中文显示）

    最近在用python中的matplotlib画折线图,遇到了坐标轴 "数字+刻度" 混合显示.标题中文显示.批量处理等诸多问题.通过学习解决了,来记录下.如有错误或不足之处,望请指 ...

  3. SAS 画折线图PROC GPLOT

    虽然最后做成PPT里的图表会被要求用EXCEL画,但当我们只是在分析的过程中,想看看数据的走势,直接在SAS里画会比EXCEL画便捷的多. 修改起来也会更加的简单,,不用不断的修改程序然后刷新EXCE ...

  4. Matplotlib学习---用matplotlib画折线图（line chart）

    这里利用Jake Vanderplas所著的<Python数据科学手册>一书中的数据,学习画图. 数据地址:https://raw.githubusercontent.com/jakevd ...

  5. 使用OpenCV画折线图

    使用OpenCV画直方图是一件轻松的事情,画折线图就没有那么Easy了,还是使用一个库吧: GraphUtils 源代码添加入工程 原文链接:http://www.360doc.com/content ...

  6. D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决

    上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...

  7. D3.js 力导向图的显示优化

    D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...

  8. D3.js画思维导图（转）

    思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...

  9. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

随机推荐

  1. hml页面转化成图片

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...

  2. SpringCloud系列九：SpringCloudConfig 基础配置（SpringCloudConfig 的基本概念、配置 SpringCloudConfig 服务端、抓取配置文件信息、客户端使用 SpringCloudConfig 进行配置、单仓库目录匹配、应用仓库自动选择、仓库匹配模式）

    1.概念:SpringCloudConfig 基础配置 2.具体内容 通过名词就可以发现,SpringCloudConfig 核心作用一定就在于进行配置文件的管理上.也就是说为了更好的进行所有微服务的 ...

  3. windows cmd.exe 将程序 stdout 输出到文件中

    问题背景:通过 cmd.exe 调用程序,会有一些输出信息,在 cmd 中不方便查阅,所以需要导入文件中. 例如 方法: 可以在其路径下看到

  4. eclipse/idea远程调试Linux程序

    第一步.在Tomcat的bin目录下的startup.sh文件的倒数第二行增加“JPDA_ADDRESS=8787”,最后一行在start的前边增加“jpda”,之后重启Tomcat 第二步.配置Ec ...

  5. SuRF: Practical Range Query Filtering with Fast Succinct Tries 阅读笔记

    SuRF(Succinct Range Filter)是一种快速而紧凑的过滤器,同时支持点查询和范围查询(包括开区间查询.闭区间查询.范围计数),可以在RocksDB中用SuRF来替换Bloom过滤器 ...

  6. Eclipse使用Maven创建Web时错误：Could not resolve archetype

    请检查maven的setting 是否有问题.window->Perfenence->maven->User Settings里 看 Gloal Setting和User Setti ...

  7. install virtual enviroment on windows

    H:\>pip install virtualenv  --install virtualenvCollecting virtualenv Downloading https://files.p ...

  8. ModelSerializer Meta设置

    class AccountSerializer(serializers.ModelSerializer): class Meta: # 模型名称 model = User # 序列化返回的字段 fie ...

  9. Window下安装Scala出现：此时不应有 \scala\bin\..\lib\jline-2.14.5.jar

    scala默认安装到了Program Files (x86)文件夹下.目录中有空格,空格就是导致这个问题的根本原因 把scala安装到其他目录即可 配置scala环境 在环境变量的系统变量里面添加SC ...

  10. webconfig标签收集

    在web项目启动时,很多因为vs没有报错,而页面跑不出来的情况,无法调试找到错误, 可以在webconfig中添加一个标签,运行项目就可以在页面显示错误 <customErrors mode=& ...