D3.js D3js具有自定义值的线性色标（刻度）？

背景概念：供人类阅读的海拔图及其颜色键需要更详细地覆盖较低海拔（我会对此进行评论，但目前无法评论，您是否考虑过使用。您可以通过将范围映射到特定颜色来控制颜色渐变。如果您正在寻找一种更自动化的方法，您可以使用等面积分布（直方图均衡）方法？否则，功率或对数刻度可能会比线性刻度有所改进。

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

1.Colorbrewer：我现在必须尊重已经使用的现有颜色渐变。但我会记住Colorbrewer。2.刻度：我不知道

顺序刻度。

。宝贵的提示！3.其他：其他方法目前对我来说有点高。功率和对数刻度是d3Logs中也提供了一些非一致的值，如0、50、100、200、400、800、1600、3200、6400m。对于人类，我更喜欢自定义值。1.Colorbrewer：我现在必须尊重已经使用的现有颜色渐变。但我要记住Colorbrewer。2.缩放：我不知道

顺序缩放

。宝贵的提示！3。其他：其他方法目前对我来说有点高。d3Logs中也提供了功率和对数刻度。Logs将为我提供非一致的值，例如0、50、100、200、400、800、1600、3200、6400m。对于人类，我更喜欢自定义值。对于阈值（）似乎是threshold（）方法的一个有用示例。

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

// Data (getJSON: TopoJSON)
d3.json("data/topo/final.json", showData);
// ---------- FUNCTION ------------- //
function showData(error, fra) {
 ... // do my topojson to svg map injection
}

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