github
/
d3
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Add color-by-area with zoom example. 

This uses d3.geo.path to compute the projected area (in square pixels) of each
county in the choropleth. It also usees d3.behavior.zoom to add geometric pan
and zoom.
This commit is contained in:
Mike Bostock 2011-02-11 17:35:21 -08:00
Родитель 12eb5c13fe
Коммит c34cd15077
1 изменённых файлов: 55 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

55
examples/choropleth/choropleth-area.html Normal file
Просмотреть файл

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="../../d3.js"></script>
<script type="text/javascript" src="../../d3.geo.js"></script>
<script type="text/javascript" src="../../d3.geom.js"></script>
<script type="text/javascript" src="../../d3.behavior.js"></script>
<style type="text/css">
svg {
background: #eee;
width: 960px;
height: 500px;
}
</style>
</head>
<body>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg:svg")
.call(d3.behavior.zoom()
.on("zoom", redraw))
.append("svg:g");
var counties = svg.append("svg:g")
.attr("id", "counties")
.attr("class", "Blues");
var states = svg.append("svg:g")
.attr("id", "states");
var path = d3.geo.path();
var fill = d3.scale.log()
.domain([10, 500])
.range(["brown", "steelblue"]);
d3.json("../../data/us-counties.json", function(json) {
counties.selectAll("path")
.data(json.features)
.enter().append("svg:path")
.attr("d", path)
.attr("fill", function(d) { return fill(path.area(d)); });
});
function redraw() {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
</script>
</body>
</html>