您的位置：首页 > 其它

[D3] 14. Line and Area Charts with D3

2015-06-05 23:06 435 查看 


<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航