具有平滑渐变和相应标签的图例

Question

我正在创建一些数据的图例。

这是我的代码：Plunker。

问题是标签沿x轴均匀分布，同时它们应遵循色标方案：

var colorScale = d3.scaleLinear()
   .domain([0, 10, 15, 20, 25, 100])
   .range(['#E28672', '#EC93AB', '#CEB1DE', '#95D3F0', '#77EDD9', '#A9FCAA']);

这就是我所拥有的：

这就是我想要的：

谢谢！

Answer 1

您需要设置要显示的刻度值，这可以通过以下方式完成：

axis.tickValues([value,value,...])

在您的情况下，您希望标记的值等于刻度中的颜色中断。幸运的是，你有一个包含这些值的数组，即scale的域名：

axis.tickValues(colorScale.domain());

通过调整图例宽度（否则标签相当接近），并应用该更改，我们得到：

var colorScale = d3.scaleLinear()
  	.domain([0,	10,	15,	20, 25, 100])
  	.range(['#E28672', '#EC93AB', '#CEB1DE', '#95D3F0', '#77EDD9', '#A9FCAA']);

  // append a defs (for definition) element to your SVG
var svgLegend = d3.select('body').append('svg')
    .attr("width",600);
var defs = svgLegend.append('defs');

	// append a linearGradient element to the defs and give it a unique id
var linearGradient = defs.append('linearGradient')
		.attr('id', 'linear-gradient');

// horizontal gradient
linearGradient
  .attr("x1", "0%")
  .attr("y1", "0%")
  .attr("x2", "100%")
  .attr("y2", "0%");

// append multiple color stops by using D3's data/enter step
linearGradient.selectAll("stop")
  .data([
    {offset: "0%", color: "#E28672"},
    {offset: "10%", color: "#EC93AB"},
    {offset: "15%", color: "#CEB1DE"},
    {offset: "20%", color: "#95D3F0"},
    {offset: "25%", color: "#77EDD9"},
    {offset: "100%", color: "#A9FCAA"}
  ])
  .enter().append("stop")
  .attr("offset", function(d) { 
    return d.offset; 
  })
  .attr("stop-color", function(d) { 
    return d.color; 
  });

// append title
svgLegend.append("text")
  .attr("class", "legendTitle")
  .attr("x", 0)
  .attr("y", 20)
  .style("text-anchor", "left")
  .text("Legend title");

// draw the rectangle and fill with gradient
svgLegend.append("rect")
  .attr("x", 10)
  .attr("y", 30)
  .attr("width", 400)
  .attr("height", 15)
  .style("fill", "url(#linear-gradient)");

//create tick marks
var xLeg = d3.scaleLinear()
  .domain([0, 100])
  .range([10, 400]);

var axisLeg = d3.axisBottom(xLeg)
  .tickValues(colorScale.domain())

svgLegend
  .attr("class", "axis")
  .append("g")
  .attr("transform", "translate(0, 40)")
  .call(axisLeg);

.legendTitle {
	font-size: 15px;
	fill: #4F4F4F;
	font-weight: 12;
}

.axis path, .axis line {
	fill: none;
	stroke: none; /*black;*/
	shape-rendering: crispEdges;
}

.axis text {
	font-family: Consolas, courier;
 	fill: #000;
	font-size: 9pt;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

我还要指出，我们可以更进一步，并使用比例的域追加渐变的停靠点：

var colorScale = d3.scaleLinear()
  	.domain([0,	10,	15,	20, 25, 100])
  	.range(['#E28672', '#EC93AB', '#CEB1DE', '#95D3F0', '#77EDD9', '#A9FCAA']);

  // append a defs (for definition) element to your SVG
var svgLegend = d3.select('body').append('svg')
    .attr("width",600);
var defs = svgLegend.append('defs');

	// append a linearGradient element to the defs and give it a unique id
var linearGradient = defs.append('linearGradient')
		.attr('id', 'linear-gradient');

// horizontal gradient
linearGradient
  .attr("x1", "0%")
  .attr("y1", "0%")
  .attr("x2", "100%")
  .attr("y2", "0%");

// append multiple color stops by using D3's data/enter step

linearGradient.selectAll("stop")
  .data(colorScale.domain())
  .enter().append("stop")
  .attr("offset", function(d) { 
    return d+"%"; 
  })
  .attr("stop-color", function(d) { 
    return colorScale(d); 
  });

// append title
svgLegend.append("text")
  .attr("class", "legendTitle")
  .attr("x", 0)
  .attr("y", 20)
  .style("text-anchor", "left")
  .text("Legend title");

// draw the rectangle and fill with gradient
svgLegend.append("rect")
  .attr("x", 10)
  .attr("y", 30)
  .attr("width", 400)
  .attr("height", 15)
  .style("fill", "url(#linear-gradient)");

//create tick marks
var xLeg = d3.scaleLinear()
  .domain([0, 100])
  .range([10, 400]);

var axisLeg = d3.axisBottom(xLeg)
  .tickValues(colorScale.domain())

svgLegend
  .attr("class", "axis")
  .append("g")
  .attr("transform", "translate(0, 40)")
  .call(axisLeg);

.legendTitle {
	font-size: 15px;
	fill: #4F4F4F;
	font-weight: 12;
}

.axis path, .axis line {
	fill: none;
	stroke: none; /*black;*/
	shape-rendering: crispEdges;
}

.axis text {
	font-family: Consolas, courier;
 	fill: #000;
	font-size: 9pt;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>