时间戳

首页 > 解决方案 > 如何使用 d3.scale.linear 在 d3 中为地图着色

d3.js - 如何使用 d3.scale.linear 在 d3 中为地图着色

问题描述

以下代码来自 d3 book/Interactive Data Visualization for the Web Book-Scott Murray Chapter 14/ 05_choropleth.html 这个 choropleth 使用美国农业生产力数据。对于不同州的一些销售数据，我需要一个外观非常相似的地图。所以，我试图用我的数据替换。我的数据具有类似的结构，一列中的状态和另一列中这些状态的总销售额（我认为不可能在此处附加我的 csv？我只是附上其中一些截图以提供一个想法）数据集中的最高值）

问题是示例中使用的着色方法 d3.scaleQuantize() 对我的数据没有给出好的结果。尽管不同州之间的数量存在很大差异，但其中许多州的颜色相同。我听说 d3.scaleQuantize() 更适合用于小数字，而我的数据具有诸如数亿之类的大值。这可能是问题的原因吗？我附上了我的地图的样子。例如，加利福尼亚州的价值是其最接近的追随者的两倍，但地图的颜色与其他许多人相同。

不确定这是否是解决方案，但我尝试使用 d3.scale.linear() 但无法使其工作。我对此很陌生。我正在使用 Webstorm 来编辑代码。如果您认为使用 d3.scale.linear() 进行着色对我有用，我将不胜感激有关如何编辑代码的任何帮助。

[![我的地图长什么样

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Setting path fills dynamically to generate a choropleth</title>
		<script type="text/javascript" src="../d3.js"></script>
		<style type="text/css">
			/* No style rules here yet */		
		</style>
	</head>
	<body>
		<script type="text/javascript">

			//Width and height
			var w = 500;
			var h = 300;

			//Define map projection
			var projection = d3.geoAlbersUsa()
								   .translate([w/2, h/2])
								   .scale([500]);

			//Define path generator
			var path = d3.geoPath()
							 .projection(projection);
							 
			//Define quantize scale to sort data values into buckets of color
			var color = d3.scaleQuantize()
								.range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);
								//Colors derived from ColorBrewer, by Cynthia Brewer, and included in
								//https://github.com/d3/d3-scale-chromatic

			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

			//Load in agriculture data
			d3.csv("us-sales-by-state.csv", function(data) {

				//Set input domain for color scale
				color.domain([
					d3.min(data, function(d) { return d.value; }),
					d3.max(data, function(d) { return d.value; })
				]);

				//Load in GeoJSON data
				d3.json("us-states.json", function(json) {

					//Merge the ag. data and GeoJSON
					//Loop through once for each ag. data value
					for (var i = 0; i < data.length; i++) {
				
						//Grab state name
						var dataState = data[i].state;
						
						//Grab data value, and convert from string to float
						var dataValue = parseFloat(data[i].value);
				
						//Find the corresponding state inside the GeoJSON
						for (var j = 0; j < json.features.length; j++) {
						
							var jsonState = json.features[j].properties.name;
				
							if (dataState == jsonState) {
						
								//Copy the data value into the JSON
								json.features[j].properties.value = dataValue;
								
								//Stop looking through the JSON
								break;
								
							}
						}		
					}

					//Bind data and create one path per GeoJSON feature
					svg.selectAll("path")
					   .data(json.features)
					   .enter()
					   .append("path")
					   .attr("d", path)
					   .style("fill", function(d) {
					   		//Get data value
					   		var value = d.properties.value;
					   		
					   		if (value) {
					   			//If value exists…
						   		return color(value);
					   		} else {
					   			//If value is undefined…
						   		return "#ccc";
					   		}
					   });
			
				});
			
			});
			
		</script>
	</body>
</html>

] 2 ] 2

标签： d3.js

解决方案

您可以按如下方式创建线性色标：

const myColor = d3.scale.linear()
                   .domain(d3.extent(data, function(d) { return d.value; }))
                   .range(["red", "green"])

我们在这里创建一个线性刻度，并将最小值映射到红色，将最大值映射到绿色。下面是您将使用 myColor 的代码

svg.selectAll("path")
  .data(json.features)
  .enter()
  .append("path")
  .attr("d", path)
  .style("fill", function(d) {
    //Get data value
    var value = d.properties.value;
    if (value) {
      //If value exists…
      return myColor(value);
    } else {
      //If value is undefined…
      return "#ccc";
    }
  });

推荐阅读