如何在d3.js中为颜色图例添加记号

我在d3.js版本4中创建了一个平滑的颜色图例：

现在，我想添加记号标记，显示从一种颜色到下一种颜色的值。我该怎么做？我的代码是：

<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; })

//定义水平渐变
var defs=svg.append（“defs”）
变量linearGradient=defs.append（“linearGradient”）
.attr（“id”，“线性梯度”）；
//绘制图例矩形并用渐变填充
d3.选择（“#svgLegend”）。追加（“rect”）
.attr（“宽度”，160）
.attr（“高度”，20）
.style（“填充”、“url（#线性渐变）”）；
var color=d3.scaleLinear（）
.domain（[valuesIn[0]，（（valuesIn[0]*2+valuesIn[1]）/3），valuesIn[1]]）//输入使用最小值和最大值
.范围（[“白色”、“蓝色”、“绿色”、“黄色”、“红色”）；
//使用D3的数据附加多个颜色停止/输入停止
linearGradient。选择全部（“停止”）
.data（color.range（））
.enter（）.append（“停止”）
.attr（“offset”，函数（d，i）{返回i/（color.range（）.length-1）；}）
.attr（“停止颜色”，函数（d）{return d；}）

解决了这个问题。以下是有效的代码片段：

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

//创建水平渐变
var defs=svg.append（“defs”）
变量linearGradient=defs.append（“linearGradient”）
.attr（“id”，“线性梯度”）；
//绘制图例矩形并用渐变填充
d3.选择（“#svgLegend”）。追加（“rect”）
.attr（“宽度”，160）
.attr（“高度”，20）
.style（“填充”、“url（#线性渐变）”）；
var数据范围=[]；
dataRange=getDataRange（）；
var min=数据范围[0]；
var max=数据范围[1]；
//创建记号
var x=d3.scaleLinear（）
.domain（[min，max]）
.范围（[0200]）；
var轴=d3.轴底（x）；
d3.选择（“svgLegend”）
.attr（“类”、“轴”）
.attr（“宽度”，160）
.attr（“高度”，40）
.附加（“g”）
.attr（“id”，“g-径流”）
.attr（“变换”、“平移（0,20）”）
.呼叫（安讯士）；

解决了这个问题。以下是有效的代码片段：

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

//创建水平渐变
var defs=svg.append（“defs”）
变量linearGradient=defs.append（“linearGradient”）
.attr（“id”，“线性梯度”）；
//绘制图例矩形并用渐变填充
d3.选择（“#svgLegend”）。追加（“rect”）
.attr（“宽度”，160）
.attr（“高度”，20）
.style（“填充”、“url（#线性渐变）”）；
var数据范围=[]；
dataRange=getDataRange（）；
var min=数据范围[0]；
var max=数据范围[1]；
//创建记号
var x=d3.scaleLinear（）
.domain（[min，max]）
.范围（[0200]）；
var轴=d3.轴底（x）；
d3.选择（“svgLegend”）
.attr（“类”、“轴”）
.attr（“宽度”，160）
.attr（“高度”，40）
.附加（“g”）
.attr（“id”，“g-径流”）
.attr（“变换”、“平移（0,20）”）
.呼叫（安讯士）；