d3.js（Data-Driven Documents）数据可视化-----初步学习

最新推荐文章于 2024-05-26 11:21:58 发布

苏丶小魂

最新推荐文章于 2024-05-26 11:21:58 发布

阅读量4k

点赞数

本文链接：https://blog.csdn.net/h6941902/article/details/39665399

版权

本文介绍了d3.js，一个用于创建数据图表的JavaScript库。通过示例展示了如何使用d3.js进行数据可视化，包括设置图表边距、尺寸，以及定义横轴和纵轴的区域和范围。

摘要由CSDN通过智能技术生成

1. d3.js 是一个将数据转化为图表的javascript库。效果如如下：

script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

也可自行去官网下载至本地。

2.完整代码如下

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Graph</title>
  <style type = "text/css">
      body{ font: 12px Arial;}
      path{
          stroke: red;
          stroke-width: 2;
          fill: none;
      }
      .axis path,
      .axis line{
          fill: none;
          stroke: grey;
          stroke-width: 1;
          shape-rendering: crispEdges;
      }
  </style>
  <!--<script type="text/javascript" src="/assets/d3.js"></script>-->
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>


<script type="text/javascript">
    var margin = {top:30, right:20, bottom: 30, left: 50};
    width = 1000 - margin.left -margin.right;
    height = 270 - margin.top - margin.bottom;


    var parseDate = d3.time.format("%d-%b-%y").parse;


    var x = d3.time.scale().range([0, width]);
    var y = d3.scale.linear().range([height, 0]);


    var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(10);
    var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10);


    //?
    var valueline = d3.svg.line()
            .x(function(d){return x(d.date);})
            .y(function(d){return y(d.close);});


    var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    //Get the data
    d3.csv("/assets/data.tsv