Wie Strichmarkierungen auf Farblegende in d3.js hinzufügen

Question

ich eine glatte Farblegende in d3.js Version 4 von dieser erstellt: https://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient.html

Jetzt möchte ich die Werte von einem Farbstriche hinzufügen zeigt, auf der nächste. Wie mache ich das? Meine Codes sind:

<svg id="svgLegend" width="160" height="30"></svg> 

//define a horizontal gradient 
var defs = svg.append("defs") 
var linearGradient = defs.append("linearGradient") 
    .attr("id", "linear-gradient"); 

//Draw the legend rectangle and fill with gradient 
d3.select("#svgLegend").append("rect") 
    .attr("width", 160) 
      .attr("height", 20) 
      .style("fill", "url(#linear-gradient)"); 

var color = d3.scaleLinear() 
     .domain([valuesIn[0], ((valuesIn[0] * 2 + valuesIn[1])/3), valuesIn[1]]) // input uses min and max values 
     .range(["white", "blue", "green", "yellow", "red"]); 

//append multiple color stops by using D3's data/enter stop 
    linearGradient.selectAll("stop") 
     .data(color.range()) 
     .enter().append("stop") 
     .attr("offset", function (d, i) { return i/(color.range().length - 1); }) 
     .attr("stop-color", function (d) { return d; }) 

Answer 1

Dieses Problem wurde behoben. Das folgende Code-Snippet funktioniert:

<svg id="svgLegend" width="160" height="40"></svg> 

//create a horizontal gradient 
var defs = svg.append("defs") 
var linearGradient = defs.append("linearGradient") 
    .attr("id", "linear-gradient"); 

//Draw the legend rectangle and fill with gradient 
d3.select("#svgLegend").append("rect") 
    .attr("width", 160) 
    .attr("height", 20) 
    .style("fill", "url(#linear-gradient)"); 

var dataRange = []; 
dataRange = getDataRange(); 

var min = dataRange[0]; 
var max = dataRange[1]; 

//create tick marks 
var x = d3.scaleLinear() 
    .domain([min, max]) 
    .range([0, 200]); 

var axis = d3.axisBottom(x); 

d3.select("#svgLegend") 
     .attr("class", "axis") 
     .attr("width", 160) 
     .attr("height", 40) 
    .append("g") 
     .attr("id", "g-runoff") 
     .attr("transform", "translate(0,20)") 
     .call(axis);