Question

我在D3地图上工作，作为涉及小区域统计的项目的几个原型之一。我从简单的地图开始，我是D3的新手。

我无法使用阈值或分位数刻度显示一系列颜色。我已经编写了至少6个示例来试验已经存在的许多其他示例，但我只是无法在区域中显示范围。我知道我很接近，但有些东西我不知道。

我的例子是https://github.com/Monduiz/OL-explorer的git。我真的很感激任何见解，以帮助我理解我做错了什么。

以下是我正在使用的代码，文件可在上面的链接中找到。

var width = 960,
    height = 500;

var colors = d3.scale.quantize()
    .domain([0, 1])
    .range(colorbrewer.YlOrRd[7]);

var projection = d3.geo.azimuthalEqualArea()
    .rotate([100, -45])
    .center([5, 20])
    .scale(800)
    .translate([width/2, height/2])

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

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

queue()
    .defer(d3.json, "OLMCSDfr.json")
    .defer(d3.csv, "data.csv")
    .await(ready);

function ready(error, can, OLM) {
  var PopById = {};

OLM.forEach(function(d) { PopById[d.Id] = +d.OLMnb; });

  svg.append("g")
    .attr("class", "SDR")
    .selectAll("path")
    .data(topojson.feature(can, can.objects.OLMCSDfr).features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", function(d) { return colors(PopById[d.Id]); });
  }

Answer 1

在ready函数中，您为每个topojson要素引用d.Id，这些要素当前未定义。

我将您的函数转换为传递给fill以取代d.properties.SDRID，这是topojson功能和OLM列表元素。还必须更改forEach语句以匹配。

这似乎有效：

function ready(error, can, OLM) {
  var PopById = {};

  OLM.forEach(function(d) { PopById[d.SDRID] = +d.OLMnb; });

  svg.append("g")
      .attr("class", "SDR")
    .selectAll("path")
      .data(topojson.feature(can, can.objects.OLMCSDfr).features)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) { 
        return colors(PopById[d.properties.SDRID]); });

}

D3：等值线图的比例和颜色

1 个答案: