Legend with a smooth gradient and the corresponding inscriptions.

Question

I am creating a legend for some data.

This is my code: Plunker .

The problem is that the labels are evenly distributed along the axis xwhen they must follow the color scale scheme:

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

Here is what I have:

And here is what I would like:

Thank!

Answer 1

You need to set the tick values ​​that you want to show, this can be done with:

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

In your case, you want the marked values ​​to be equal to the color gap on your scale. Fortunately, you already have an array containing these values, a domain of 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 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>

Hide result

, , :

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

Hide result