Question

我用行政区域创建了自己的Germany.json。

作为这个Germany.json的数据，我创建了一个包含2列的简单表：（行政区域名称）（行政区域比率）

我的地图效果很好，但我的工作还没有完成。

我有4列的详细表格（日期，时间，行政区域和费率）。

因此，如果您先选择日期，再选择一个时间，则可以创建等值线图。选择日期和时间后，将显示给定输入的地图。

这里的问题是，我是Javascript的初学者。我脑子里有一些想法，但我无法将这些想法转化为代码。

这就是我在这里寻求帮助和想法的原因。

我甚至可能要问的是什么？

http://www.vincentbroute.fr/mapael/usecases/world/

上面链接的地图是迄今为止我发现的最有趣的Choropleth地图，它与我想制作的地图有一些共同之处。

感谢您阅读此内容。

这是我的代码：

<!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,
	height = 1000;
	
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"; }));
	
//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) { 
		rateById.set(d.NAME_2, +d.rate); 
		})
    .await(ready);

//Karte wird geladen und mit den gewünschten Properties geöffnet und zugewiesen	  
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) { 
		return quantize(rateById.get(d.properties.NAME_2)); 
	  })
      .attr("d", path);


}

//d3.select(self.frameElement).style("height", height + "px");
</script>

Answer 1

那究竟是什么问题？你到底在哪里？

为了帮助您入门，您可能需要查看我之前构建的this simple demo app。选择七个数据集中的一个时，它会将数据集从公共API加载到等值区域图中。此外，您可以更改颜色方案。

此演示也完全响应，支持缩放和地图具有全屏模式支持。虽然我还没有将代码作为repo发布，但它是开源的，无论你想要什么，你都可以使用它。见下面的截图...

Screenshot

d3具有不同日期和时间的等值线图

1 个答案: