d3.js畫折線圖

時間 2019-11-19

原文原文鏈接

下載d3.zip，並解壓到網頁文件所在的文件夾html

windows下，在命令行進入網頁文件夾，輸入python

python -m http.server

　　在瀏覽器中輸入127.0.0.1:8000/xxx.htmlwindows

示例以下，html文件和data存在同一個目錄下瀏覽器

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

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。