用顏色 D3.js 填充地圖

Question

我是 Javascript 和 D3.JS 新手我有這個代碼來創建地圖：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body{
    background-color:#0B3861;
}    
path {
  stroke: grey;
  stroke-width: 0.25px;
  fill: #dfdfdf;
}
</style>
<body>
<script src="d3.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 1000,
    height = 600;

var projection = d3.geo.mercator()
    .center([-5,45])
    .scale(200)
    .rotate([0,0]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geo.path()
    .projection(projection);

var g = svg.append("g");


     d3.json("https://gist.githubusercontent.com/d3noob/5193723/raw/6e1434b2c2de24aedde9bcfe35f6a267bd2c04f5/world-110m2.json", function(error, topology) {


    g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
      .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});

</script>
</body>
</html>

現在我想把一些國家塗成紅色，把其他國家塗成藍色。 我有一個像這樣的其他 CSV 文件：國家，情緒

法國，1

美國, 0

所以如果情緒為 1，我想用紅色填充這個國家。

有人可以幫助我嗎？ 提前致謝

皮埃爾

Answer 1

你必須在你的道路上使用style

.style("fill", 'red');

隨機藍色，紅色到國家：

const colors = ['white', 'blue', 'red'];

g.selectAll("path")
  .data(topojson.object(topology, topology.objects.countries)
  .geometries)
   .enter()
  .append("path")
  .attr("d", path)
  .style("fill", () => colors[Math.floor(Math.random() * 2) + 1]);

帶有填充國家/地區的代碼的 Codepen

用顏色 D3.js 填充地圖

問題描述

1 個解決方案

解決方案1
1 2016-05-30 11:29:58

用顏色 D3.js 填充地圖

問題描述

1 個解決方案

解決方案1 1 2016-05-30 11:29:58

解決方案1
1 2016-05-30 11:29:58