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 of your code with filled countries

用颜色D3.js填充地图

1 个答案: