为什么我的等值线出现所有相同的颜色？

Question

这是我的第一个问题，请耐心等待。

我正在尝试使用 d3.js 制作等值线图（一张地图，其中不同部分根据分配给它们的某些值进行着色）。我正在使用 https://www.d3-graph-gallery.com/graph/choropleth_basic.html 中给出的示例，但将地图更改为苏格兰之一并将值更改为人口密度。

当我运行它时，我得到了一张地图，但它的颜色都是相同的蓝色阴影。我试过更改 colorScale 的域但无济于事。

这是我目前得到的：

// The svg
var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

// Map and projection
var path = d3.geoPath();
var projection = d3.geoNaturalEarth()
  .scale(20 * width / Math.PI)
  .translate([width / 2 + 150, height / 2 + 2500]);


// Data and color scale
var data = d3.map();
var colorScale = d3.scaleThreshold()
  .domain([0, 600])
  .range(d3.schemeBlues[7]);

// Load external data and boot
d3.queue()
  .defer(d3.json, "https://raw.githubusercontent.com/squirrel-star/scotland/main/geojsonscotlandladjson.geojson")
  .defer(d3.csv, "https://raw.githubusercontent.com/squirrel-star/scotland/main/scotlanddensitywithid.csv", function(d) {
    data.set(d.code, +d.density);
  })
  .await(ready);

function ready(error, topo) {

  console.log(data);

  // Draw the map
  svg.append("g")
    .selectAll("path")
    .data(topo.features)
    .enter()
    .append("path")
    // draw each country
    .attr("d", d3.geoPath()
      .projection(projection)
    )
    // set the color of each country
    .attr("fill", function(d) {
      d.total = data.get(d.id) || 0;
      return colorScale(d.total);
    });
}

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<svg id="my_dataviz" width="400" height="400"></svg>

如有任何修复建议，我们将不胜感激。谢谢！

Answer 1

我认为您可能误读了 d3.scaleThreshold 的文档，因为它说如果您的范围内有 N + 1 个值，则您的域中需要有 N 个值。在你的情况下，这使得 N = 6.

此外，d.id 不存在。我改用 d.properties.LAD13NM，因为该字段包含相关县的名称。

最后，不需要使用 map，因为您只是将它用作某种对象，所以我只是将其替换为常规对象。

// The svg
var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

// Map and projection
var path = d3.geoPath();
var projection = d3.geoNaturalEarth()
  .scale(20 * width / Math.PI)
  .translate([width / 2 + 150, height / 2 + 2500]);


// Data and color scale
var data = {};
var colorScale = d3.scaleThreshold()
  .domain([100, 200, 300, 400, 500, 600])
  .range(d3.schemeBlues[7]);

// Load external data and boot
d3.queue()
  .defer(d3.json, "https://raw.githubusercontent.com/squirrel-star/scotland/main/geojsonscotlandladjson.geojson")
  .defer(d3.csv, "https://raw.githubusercontent.com/squirrel-star/scotland/main/scotlanddensitywithid.csv", function(d) {
    data[d.code] = +d.density;
  })
  .await(ready);

function ready(error, topo) {
  // Draw the map
  svg.append("g")
    .selectAll("path")
    .data(topo.features)
    .enter()
    .append("path")
    // draw each country
    .attr("d", d3.geoPath()
      .projection(projection)
    )
    // set the color of each country
    .attr("fill", function(d) {
      d.total = data[d.properties.LAD13NM] || 0;
      return colorScale(d.total);
    });
}

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<svg id="my_dataviz" width="400" height="400"></svg>

为什么我的等值线出现所有相同的颜色？

Why is my choropleth coming out all the same colour?

javascript

d3.js

choropleth