<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
padding-top: 50px;
padding-left: 100px;
}
#chart {
width: 300px;
height: 200px;
border: 1px solid black;
margin-top: 10px;
}
path {
/*fill: purple;
fill-opacity: 0.7;*/
fill: none;
stroke: blue;
stroke-width: 3px;
}
</style>
</head>
<body>
<button onclick="updateChart('math')">Math</button>
<button onclick="updateChart('science')">Science</button>
<button onclick="updateChart('reading')">Reading</button>
<div id="chart"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script>
var w = 300;
var h = 200;
var path;
var subjects;
$.getJSON('//jsbin.com/vegaqi/1.js', function(json) {
subjects = json;
_.keys(subjects).forEach(function(subject) {
subjects[subject].forEach(function(d) {
d.date = d3.time.format("%Y%m%d").parse(d.date);
console.log(d.date);
})
});
path = d3.select('#chart')
.append('svg')
.attr('width', w)
.attr('height', h)
.append('g')
.append('path');
updateChart('math');
});
function updateChart(subject) {
var data = subjects[subject];
var dates = _.pluck(data, 'date');
var counts = _.pluck(data, 'count');
var x = d3.time.scale()
.domain(d3.extent(dates))//d3.extent(), return [min, max]
.range([0, w]);
var y = d3.scale.linear()
.domain(d3.extent(counts))
.range([h, 0]);
var area = d3.svg.area()
.interpolate('bundle') //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points
.x(function(d) {
return x(d.date);
})
.y0(function(d) {
return y(0);
})
.y1(function(d) {
return y(d.count);
});
var line = d3.svg.line()
.interpolate('bundle') //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.count);
});
path
.datum(data)//for only one object, path object
.transition()
.duration(450)
.attr('d', line);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
padding-top: 50px;
padding-left: 100px;
}
#chart {
width: 300px;
height: 200px;
border: 1px solid black;
margin-top: 10px;
}
path {
fill: purple;
fill-opacity: 0.7;
/*fill: none;
stroke: blue;
stroke-width: 3px;*/
}
</style>
</head>
<body>
<button onclick="updateChart('math')">Math</button>
<button onclick="updateChart('science')">Science</button>
<button onclick="updateChart('reading')">Reading</button>
<div id="chart"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script>
var w = 300;
var h = 200;
var path;
var subjects;
$.getJSON('//jsbin.com/vegaqi/1.js', function(json) {
subjects = json;
_.keys(subjects).forEach(function(subject) {
subjects[subject].forEach(function(d) {
d.date = d3.time.format("%Y%m%d").parse(d.date);
console.log(d.date);
})
});
path = d3.select('#chart')
.append('svg')
.attr('width', w)
.attr('height', h)
.append('g')
.append('path');
updateChart('math');
});
function updateChart(subject) {
var data = subjects[subject];
var dates = _.pluck(data, 'date');
var counts = _.pluck(data, 'count');
var x = d3.time.scale()
.domain(d3.extent(dates))//d3.extent(), return [min, max]
.range([0, w]);
var y = d3.scale.linear()
.domain(d3.extent(counts))
.range([h, 0]);
var area = d3.svg.area()
.interpolate('bundle') //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points
.x(function(d) {
return x(d.date);
})
.y0(function(d) {
return y(0);
})
.y1(function(d) {
return y(d.count);
});
var line = d3.svg.line()
.interpolate('bundle') //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.count);
});
path
.datum(data)//for only one object, path object
.transition()
.duration(450)
.attr('d', area);
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具