1

背景概念：面向人类读者的高程地图及其颜色键需要更详细地覆盖低海拔（<200m），世界 80% 的人口居住在此。

D3项目：

假设海拔阈值水平 (m) 为：0, 50, 100, 200, 500, 1000, 2000, 3000, 4000, 5000m。

  1. 基于线性色标
  2. 每 20px 滴答声（常规跨度）
  3. 特定阈值的颜色选择： 0、50、100、200、500、1000、2000、3000、4000、5000m
  4. 带有特定标签的刻度： 0、50、100、200、500、1000、2000、3000、4000、5000m

欢迎使用此类自定义比例、scale.ordinal()、scale.log() 等示例。

评论：我目前使用了一个不令人满意的线性斜坡代码，请参阅这个，它将我的比例切割成 10 个相等的 500m 跨度：

在此处输入图像描述

我实际上应该有 4 个不同的果岭，分别代表 0、50、100 和 200m，而棕色/灰色/白色则更少。

  1. Var 颜色声明。通过说明我有颜色变化的点来设置颜色渐变表：
// Color-values equivalence
var color_elev = d3.scale.linear()
  .domain([0, 200, 2000, 5000]) // values elevation (m)
  .range(["#ACD0A5", "#E1E4B5", "#AA8753", "#FFFFFF"]) // colors
  .interpolate(d3.interpolateHcl)

这三个跨度中的每一个都确实应该具有线性颜色变化。

  1. 注入我的 SVG 多边形
// Data (getJSON: TopoJSON)
d3.json("data/topo/final.json", showData);
// ---------- FUNCTION ------------- //
function showData(error, fra) {
 ... // do my topojson to svg map injection
}
  1. 创建，推动我的颜色渐变框和键
/* START LEGEND_RAMP  */
// Color ramp
var x = d3.scale.linear()
  .domain([0, 5000]) // legend elevation (m)
  .range([0, 280]); // width (px)

// Color ramp place  ? ? ?
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickSize(13)
  .tickFormat(d3.format(".0f"));

// (JS shortcut)
var legend_key = svg.append("g")
  .attr("class", "legend_key")
  .attr("transform", "translate(" + (width - 300) + "," + (height - 30) + ")");

// Color ramp: white background
legend_key.append("rect")
  .attr("x", -10)
  .attr("y", -10)
  .attr("width", 310)
  .attr("height", 40)
  .style("fill", "white")
  .style("fill-opacity", 0.5)

// Color ramp: bricks
legend_key.selectAll(".color_ramp")
  .data(d3.pairs(x.ticks(10))) // is this forcing a 10 equal sizes slicing ?
.enter().append("rect")
  .attr("class", "elev_color_brick") // or "band"
  .attr("height", 8)
  .attr("x", function(d) { return x(d[0]); })
  .attr("width", function(d) { return x(d[1]) - x(d[0]); })
  .style("fill", function(d) { return color_elev(d[0]); });

// ?
legend_key.call(xAxis);
/* END LEGEND  */
4

1 回答 1

1

我会对此发表评论，但目前不能，你看过colorbrewer吗？另外，您是否考虑过使用序数标度。您可以通过将范围映射到特定颜色来控制色带。如果您正在寻找一种更自动化的方式，您可以使用等面积分布（直方图均衡）方法吗？否则，功率或对数标度可能会比线性标度有所改进。

于 2013-08-25T09:25:59.907 回答