d3js在另一个标签内添加标签

Question

我想像这样在 html 中创建一个图例：

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

但是输出是：

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

这是我的代码：

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

有什么建议吗？谢谢

Answer 1

只需在文本前插入 span：

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

Answer 2

好的，最后我用 css float 修复了@Asad 代码的左端。