html D3byEX 6.4:气泡图(适应D3.js v4)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html D3byEX 6.4:气泡图(适应D3.js v4)相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<meta charset=utf-8>
<head>
<meta name="description" content="D3.js v4, bubble plot, world bank,
.axisLeft, .scaleLinear, .axisBottom,
d3.scaleOrdinal(d3.schemeCategory10)" />
</head>
<body>
<!-- .axisLeft, .scaleLinear, .axisBottom,
d3.scaleOrdinal(d3.schemeCategory10) -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- .attrs({}) -->
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<script>
var url = "https://gist.githubusercontent.com/d3byex/30231953acaa9433a46f/raw/6c7eb1c562de92bdf8d0cd99c6912048161c187e/fert_pop_exp.csv";
d3.csv(url, function (error, rawData) {
var data = rawData.map(function (d) {
return {
CountryCode: d.CountryCode,
CountryName: d.CountryName,
LifeExp: +d.LifeExp, // unary operator converts str to int
FertRate: +d.FertRate,
Population: +d.Population,
Region: d.Region
}
});
var minBubbleSize = 5, maxBubbleSize = 50;
var margin = {
left: maxBubbleSize, top: maxBubbleSize,
bottom: maxBubbleSize, right: maxBubbleSize
};
var axisPadding = 10;
var graphWidth = 500, graphHeight = 400;
var totalWidth = graphWidth + margin.left + margin.right;
var totalHeight = graphHeight + margin.top + margin.bottom;
var lifeExpectancy = data.map(function (d) { return d.LifeExp; });
var fertilityRate = data.map(function (d) { return d.FertRate; });
var population = data.map(function (d) { return d.Population; });
var regions = data.map(function (d) { return d.Region; });
var xScale = d3.scaleLinear() // v4
.domain([d3.min(lifeExpectancy), d3.max(lifeExpectancy)])
.range([0, graphWidth]);
var yScale = d3.scaleLinear() // v4
.domain([d3.max(fertilityRate), 0])
.range([0, graphHeight]);
var popDomain = [d3.min(population), d3.max(population)];
var popScale = d3.scaleLinear() // v4
.domain(popDomain)
.range([minBubbleSize, maxBubbleSize]);
var uniqueRegions = d3.set(regions)
.values();
var regionColorMap = d3.scaleOrdinal(d3.schemeCategory10) // v4
.domain(uniqueRegions);
var svg = d3.select('body')
.append('svg')
.attrs({width: totalWidth, height: totalHeight});
var yAxis = d3.axisLeft().scale(yScale); // v4
var yAxisNodes = svg.append('g')
.attr('transform', 'translate(' + (margin.left - axisPadding) + ',' + margin.top + ')')
.call(yAxis);
styleAxisNodes(yAxisNodes);
var xAxis = d3.axisBottom().scale(xScale); // v4
var xAxisNodes = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + (totalHeight - margin.bottom + axisPadding) + ')')
.call(xAxis);
styleAxisNodes(xAxisNodes);
svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.each(function (d) {
d3.select(this)
.attrs({
cx: xScale(d.LifeExp), cy: yScale(d.FertRate),
r: popScale(d.Population), fill: regionColorMap(d.Region),
stroke: regionColorMap(d.Region), 'fill-opacity': 0.5 });});
}); // d3.csv
function styleAxisNodes(axisNodes) {
axisNodes.selectAll('.domain')
.attrs({ fill: 'none', 'stroke-width': 1, stroke: 'black' });
axisNodes.selectAll('.tick line')
.attrs({ fill: 'none', 'stroke-width': 1, stroke: 'black' });
}
</script>
</body>
</html>
以上是关于html D3byEX 6.4:气泡图(适应D3.js v4)的主要内容,如果未能解决你的问题,请参考以下文章
html D3byEX 8.4:拖放(适应D3.js v4)
html D3byEX:4.7:右轴(适应D3.js v4)
html D3byEX 7.3:延迟转换(适应D3.js v4)
html D3byEX 7.1:动画颜色(适应D3.js v4)