欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

javascript : d3.js 读取csv , 画折线图

程序员文章站 2022-07-13 23:31:02
...
参考 https://blog.csdn.net/github_37483541/article/details/54934158
d3_csv_line1.html 
<!DOCTYPE html>
<html>
<head>
<meta charset='gb2312' />
<script src="/d3/d3.v3.min.js"></script>
<style type="text/css">
 .axis path,
 .axis line {
   fill: none;
   stroke: #1E90FF;
   stroke-width: 1;
   shape-rendering: crispEdges;
 }
 .stroke_width{
   stroke-width: 0.3vmin;
 }
</style>
</head>
<body>
<script>
// 边框的颜色
var border_color = "#1E90FF";
// 用于填充的颜色
var fillcolor = "rgba(204, 238, 255, 0.1)";
var dotcolor = "rgba(255, 255, 255, 0.9)";
// 基金净值数据
var dataset =[];
var dates =[];
var jzset =[];
d3.csv("jijin1.csv", function(error,data){
   // if(error){ console.log(error);}
   data.forEach(function(d) {
    var cx = d.date;
    var cy = d.jz; 
    dataset.push([cx,cy]);
    dates.push(cx);
    jzset.push(cy);
  })

var w1 = 1000;
var h1 = 500;

var svg = d3.select("body").append('svg')
     .attr("width", w1)
     .attr("height", h1);

var div2 = d3.select("body").append('div')
     .attr("class", "tooltip2")
     .style("opacity", 0);

var margin = {top: 20, right: 25, bottom: 100, left: 60};
   width = w1 - margin.left - margin.right,
   height = h1 - margin.top - margin.bottom;

var new_svg = svg.append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var format = d3.time.format("%Y-%m-%d");

var x = d3.time.scale()
    .domain([format.parse(dates[0]),
             format.parse(dates[dates.length-1])])
    .range([0, width]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(10)
    .tickFormat(d3.time.format("%Y-%m-%d"));

var y = d3.scale.linear()
    .domain([0, d3.max(jzset, function(d){ return d;})*1.1])
    .range([height, 0]);

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

// Define the line
var line = d3.svg.line()
    .x(function(d){return x(format.parse(d[0]))})
    .y(function(d){return y(d[1])})
    .interpolate("linear");

// Add the X Axis
new_svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .attr("class", "x axis")
    .style("fill",border_color)
    .style("font-size","1em")
    .call(xAxis)
    .selectAll("text")
    .attr("transform", "rotate(-70)")
    .style("text-anchor", "end");

// Add the Y Axis
new_svg.append("g")
    .attr("class", "y axis")
    .style("fill",border_color)
    .style("font-size","1.3em")
    .call(yAxis);

// Add the line
var svg_path1 = new_svg.append('path')
    .attr("d", line(dataset))
    .attr("fill","none")
    .attr("stroke-width","0.16em")
    .attr("stroke",border_color);

// 动画
function do_animation(path) {
    var totalLength = path.node().getTotalLength();
    path.attr("stroke-dasharray", totalLength + " " + totalLength)
        .attr("stroke-dashoffset", totalLength)
        .transition()
        .duration(2000)
        .ease("linear")
        .attr("stroke-dashoffset", 0);
 }
do_animation(svg_path1);
// Grid 网格线
function styleGridlineNodes(axisNodes) {
  axisNodes.selectAll('.domain')
   .attr({ fill: 'none', stroke: 'none'});
  axisNodes.selectAll('.tick line')
   .attr({fill: 'none', 'stroke-width': 1, stroke: 'lightgray'});
}
// 画Grid 横线
var yGridlinesAxis = d3.svg.axis().scale(y).orient("left");
var yGridlineNodes = svg.append('g')
   .attr('transform', 'translate(' + (margin.left + width)+ ',' + margin.top + ')')
   .call(yGridlinesAxis.tickSize(width, 0, 0).tickFormat(""));
styleGridlineNodes(yGridlineNodes);
//  画Grid 竖线
var xGridlinesAxis = d3.svg.axis().scale(x).orient("bottom");
var xGridlineNodes = svg.append('g')
   .attr('transform', 'translate(' + margin.left + ',' +(h1 - margin.bottom) + ')')
   .call(xGridlinesAxis.tickSize(-w1, 0, 0).tickFormat(""));
styleGridlineNodes(xGridlineNodes);

});
</script>  
</body>
</html>

参考书:[ D3.js By Example.pdf]
jijin1.csv
date,jz
2010-04-02,1.0000
... ...
2018-09-19,1.7536
2018-09-20,1.7474
2018-09-21,1.7686
记录总数大于2000行
相关标签： javascript d3.js csv d3.time.format

上一篇： 【蓝桥杯】[算法提高VIP] 去注释

下一篇： python : turtle 画奥运五环

推荐阅读