javascript - 基于外部数据的 D3 map 中的颜色区域

Question

我正在尝试在荷兰 12 个省份的 D3 中制作 map ，并根据外部 JSON 文件中的一些模拟数据为它们着色:

[{"_id":"Groningen","value":52},
{"_id":"Friesland","value":18},
{"_id":"Drenthe","value":87},
{"_id":"Overijssel","value":93},
{"_id":"Flevoland","value":60},
{"_id":"Gelderland","value":7},
{"_id":"Utrecht","value":26},
{"_id":"Noord-Holland","value":52},
{"_id":"Zuid-Holland","value":72},
{"_id":"Zeeland","value":41},
{"_id":"Noord-Brabant","value":78},
{"_id":"Limburg","value":19}]

这是我到目前为止的代码。它成功地生成了它们的 map ，但现在每个省都根据省名的长度着色(这当然很愚蠢):

var width = 960,
height = 500,
centered;

// Define color scale
var color = d3.scaleLinear()
   .domain([1, 20])
   .clamp(true)
   .range(['steelblue', "yellow"]);

var projection = d3.geoMercator()
   .scale(5500)
   .center([6, 52.1])
   .translate([width / 2, height / 2]);

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

// Set svg width & height
var svg = d3.select('svg')
    .attr('width', width)
    .attr('height', height);

// Add background
svg.append('rect')
   .attr('class', 'background')
   .attr('width', width)
   .attr('height', height)

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

var effectLayer = g.append('g')
   .classed('effect-layer', true);

var mapLayer = g.append('g')
   .classed('map-layer', true);

// Load map data
d3.json('data/provincesNL2.json', function(error, mapData) {
    var features = mapData.features;

    // Draw each province as a path
    mapLayer.selectAll('path')
      .data(features)
      .enter().append('path')
      .attr('d', path)
      .attr('vector-effect', 'non-scaling-stroke')
      .attr('fill', fillFn)
});

// Get province name
function nameFn(d){
   return d && d.properties ? d.properties.PROVINCIE : null;
}

// Get province name length
function nameLength(d){
   var n = nameFn(d);
   return n ? n.length : 0;
}

// Get province color
function fillFn(d){
   return color(nameLength(d));
};

我只是不知道如何实现 JSON 文件中的值来表示沿色标的每个省的颜色。我没有使用 javascript 的经验，我认为这应该不会太难，但我就是想不通。非常感谢您的帮助!

Answer 1

您应该使用数据对象的最小值和最大值为您的色标指定域。

var colour = d3.scaleLinear()
  .domain([
    d3.min(dataObject, function(d) { return d.value }),
    d3.max(dataObject, function(d) { return d.value })
  ])
  .clamp(true)
  .range(['steelblue', "yellow"]);

在 fill 属性的回调函数中，你应该找到(你可以用多种方式，取决于数据结构)当前省份的值并将它传递给 colour 功能。

.attr("fill", function(d, i) {
  var value = // here you should get for current data item ;

  return colour(value); // use this value for colour scale
})

检查 this example对于荷兰 map (我稍微修改了您的数据，以简化示例和硬编码的 topojson 对象)。