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

袁致远
2023-12-01
参考 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("660001.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]
660001.csv
date,jz
2008-08-04,1.0000
... ...
2018-09-19,1.8572
2018-09-20,1.8524
2018-09-21,1.8816
记录总数大于2400行
javascript：d3.js 读取csv , 画折线图

相关阅读

相关文章

相关问答

相关文档
