Как добавить галочки в цветовую легенду в d3.js

Я создал плавную цветовую легенду в d3.js версии 4 из этого: https://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient.html

Теперь я хочу добавить галочки, показывающие значения от одного цвета к другому. Как я могу это сделать? Мои коды:

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

d3.js legend
person user2770113    schedule 19.12.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Решил эту проблему. Ниже приведен фрагмент кода, который работал:

<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);
person user2770113    schedule 20.12.2017