我創建了自己的具有行政區域的Germany.json。d3具有不同日期和時間的等值線圖
至於這個Germany.json數據,我創建了一個簡單的表2列: (行政區域的名稱)(行政區域的速率)
我的地圖的偉大工程,但我的工作尚未完成接着就,隨即。
我有4列(日期,時間,行政區域和費率)的詳細表。
因此,如果您先選擇日期,然後再選擇時間,則可以創建Choropleth地圖。選擇日期和時間後,給定輸入的地圖顯示出來。
這裏的問題是,我是一個JavaScript的初學者。 我在腦海中有一些想法,但我無法將想法轉化爲代碼。
這就是爲什麼我在這裏要求幫助和想法。
我在問甚至有可能嗎?
http://www.vincentbroute.fr/mapael/usecases/world/
在上面的鏈接的地圖是最有趣的地區分佈圖到目前爲止,我還發現,有共同的東西與我想要的地圖。
感謝您閱讀這篇文章。
這裏是我的代碼:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.properties {
fill: none;
}
//Hier werden die Farben für verschiedene Kategorien zugeteilt
.q0-9 { fill:rgb(247,251,255); }
.q1-9 { fill:rgb(222,235,247); }
.q2-9 { fill:rgb(198,219,239); }
.q3-9 { fill:rgb(158,202,225); }
.q4-9 { fill:rgb(107,174,214); }
.q5-9 { fill:rgb(66,146,198); }
.q6-9 { fill:rgb(33,113,181); }
.q7-9 { fill:rgb(8,81,156); }
.q8-9 { fill:rgb(8,48,107); }
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/topojson.v1.js"></script>
<script src="http://d3js.org/colorbrewer.v1.js"></script>
<script src="http://d3js.org/queue.v1.js"></script>
</body>
<script>
//Größe der Karte wird eingestellt
var width = 1050,
\t height = 1000;
\t
var rateById = d3.map();
//Skalierung für die Einfärbung
var quantize = d3.scale.quantize()
.domain([1, 50])
.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
\t
//Skalierung und Ausrichtung auf deutschland
var projection = d3.geo.albers()
.center([10.4, 51.35])
.rotate([1, 0])
.parallels([50, 60])
.scale(1200 * 5)
.translate([width/2, height/2]);
//D3 Projection wird angelegt
var path = d3.geo.path()
.projection(projection);
//svg wird angelegt
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
//Warteschlange zum Ausführen des Skripts wird angelegt
queue()
.defer(d3.json, "germany.json")
.defer(d3.tsv, "test2.tsv", function(d) {
\t \t rateById.set(d.NAME_2, +d.rate);
\t \t })
.await(ready);
//Karte wird geladen und mit den gewünschten Properties geöffnet und zugewiesen \t
function ready(error, de) {
svg.append("g")
.attr("class", "properties")
svg.selectAll("path")
.data(topojson.feature(de, de.objects.collection).features)
.enter().append("path")
.attr("class", function(d) {
\t \t return quantize(rateById.get(d.properties.NAME_2));
\t })
.attr("d", path);
}
//d3.select(self.frameElement).style("height", height + "px");
</script>
//不是*那個人*,但不是它叫做「Choropleth」,來自希臘語xωροπληθών? –