参考 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行
分享到：
相关推荐
D3.js提供了丰富的图表类型，如折线图、柱状图、地图等，可以用来展示时间序列数据，如本项目的25年GDP变化。D3.js的强大之处在于其灵活性，允许开发者自定义每一个细节，从而创造出独特的视觉效果。在该项目中，...
D3.js的强大之处在于它的灵活性，可以创建各种复杂的图表，如折线图、柱状图、散点图、地图以及更多创新的可视化形式。Python的加入使得数据预处理和后端逻辑更加强大和高效。通过结合两者，开发者可以构建出既美观...
4. 图表构建：D3.js可以用来创建各种类型的图表，如折线图（`d3.line()`）、柱状图（`d3.bar()`）、散点图（`d3.scatterplot()`）和饼图（`d3.pie()`）。在“data-visualizer”中，可能包括了这些图表的实现，以满足...
JavaScript中，可以使用D3.js的line()函数，或者Chart.js的line chart来绘制折线图。这种图表常用于股票市场分析、销售报告、气候变化研究等领域。 4. **使用D3.js**：D3.js（Data-Driven Documents）是一个强大的...
例如，可以创建柱状图、折线图、散点图等，使数据以直观的形式展示给用户。 7. **项目结构**： 压缩包内的“d3-dsv-master”可能包含了源代码、示例、测试用例等，这有助于开发者理解其工作原理并进行二次开发或...
【标题】：“wizard_d3:旧版项目可从CSV文件动态生成仪表板”是指一个使用JavaScript编写的开源项目，其核心功能是通过读取CSV（逗号分隔值）文件来动态创建数据可视化仪表板。在旧版项目中，这种功能对于数据分析师...
8. **数据导入和处理**：D3.js可以方便地读取CSV、JSON等数据格式，并提供简单的数据处理功能，如过滤、聚合等。 9. **响应式设计**：考虑到网页的多平台展示，D3.js允许你创建适应不同屏幕尺寸的可视化，实现响应...
d3.js能够生成和操纵SVG元素，如矩形、圆形、线条等，用于创建各种图表，如柱状图、饼图、折线图等。 3. **交互性**：d3.js的一大特色是其对用户交互的出色支持。在“e-declarations”中，用户可能可以点击、悬停或...
D3.js，全称Data-Driven Documents，是一款强大的JavaScript库，它允许开发者用数据操作DOM（文档对象模型），从而创建动态且交互式的网络数据可视化。 首先，我们要理解D3.js的核心概念。D3.js通过绑定数据到DOM...
2. **数据加载**：如何使用D3.js读取CSV、JSON等格式的数据文件，并将其与DOM元素关联。 3. **SVG绘制**：使用SVG（Scalable Vector Graphics）创建图形，如折线图、柱状图、饼图、散点图等，SVG的优点在于其矢量...
D3.js 提供了创建这些图表的工具和方法，如 `d3.line()` 用于创建折线图，`d3.scaleLinear()` 用于设置比例尺，`d3.axis` 用于创建坐标轴。 7. **交互性**： D3.js 支持丰富的交互功能，如悬停提示、点击事件、...
2. **数据可视化**：理解各种可视化图表（如柱状图、折线图、饼图等）的原理，以及如何通过D3.js创建这些图表。 3. **CSV文件处理**：了解CSV文件的结构，学习如何在JavaScript中读取和解析CSV数据。 4. **用户界面...
D3提供了便利的数据读取函数，如`d3.csv()`和`d3.json()`，可以直接将数据加载到JavaScript环境中。加载完成后，数据可以与DOM元素进行绑定，使得每个元素都与数据的一个特定值相关联。 接着，D3提供了丰富的图表...
它支持多种图表类型，如折线图、散点图、柱状图、热力图等，这些图表都具有高质量的视觉效果和高度定制性。Plot.ly库可以与D3.js、Matplotlib、Pandas等其他数据处理库结合使用，为数据科学家和前端开发者提供了一套...
6. 可能涉及的图表库，如D3.js、Chart.js或ECharts，用于创建各种类型的图表，如柱状图、折线图、饼图等。 7. 调试技巧，如何跟踪和解决前后端交互中的问题。 这个项目是一个很好的起点，帮助初学者将理论知识应用...
6. **数据加载**：数据通常从外部文件（如CSV或JSON）加载，D3提供了方便的`d3.csv()`或`d3.json()`函数来读取和解析数据。 7. **样式和主题**：D3.js允许开发者使用CSS来控制图表的样式，也可以自定义主题以保持...
D3.js提供了方便的数据加载函数，如`d3.csv()`或`d3.json()`，用于读取数据文件。 2. 数据处理：加载数据后，通常需要进行预处理，如清洗、转换或计算新的数据字段。D3.js提供了丰富的数组操作方法，如`map()`, `...
2. **编程语言**：未明确指出具体使用的编程语言，但通常用于画图形的语言有Python（如matplotlib、seaborn库）、JavaScript（D3.js、Chart.js库）或R语言（ggplot2库）。每种语言都有其特色和适用场景，例如Python...
2. 编程语言：如Python（Pandas、Matplotlib、Seaborn等库）、JavaScript（D3.js、ECharts等框架）或R语言，用于数据处理和报表生成。 3. 报表工具：如Microsoft Excel、Tableau、Power BI，提供直观的界面设计报表...
JS数据分析插件是利用JavaScript语言为网页提供数据可视化和分析功能的工具，它们通常能够帮助开发者高效地创建各种类型的数据图表，如柱状图、折线图、饼图、散点图等，以直观地展示复杂的数据。 在JS数据分析插件...