D3js线性色标与自定义值（刻度）？

Question

背景概念：人类读者的高程地图及其颜色键需要更详细地报道低海拔（<200米），世界上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（）等欢迎。

---

评论：我目前使用了一个令人不满意的线性斜坡代码see this，它将我的比例缩小为10个相等跨度为500米：



我实际上应该有4个不同的绿色代表0,50,100和200米以及更少的棕色/灰色/白色。

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)

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

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  */

Answer 1

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