Question

I would like to create a legend in html like this:

<li><span style="background-color:#n;"></span> Label</li>

But the output is:

<li>Label <span style="background-color:#n;"></span></li>

This is my code:

d3.select("#myid").selectAll("li")
.data(dataset)
.enter().append("li")
.text(function(d) {return d;})
.insert("span")
.attr('style', function(d, i) {return "background-color:" + color});

A few suggestions? Thanks

Answer 1

Simply insert the span before the text:

d3.select("#myid").selectAll("li")
.data(dataset)
.enter()
.append("li")
.text(function(d) {return d;})
.insert("span", ":first-child")
.attr('style', function(d, i) {return "background-color:" + color});