javascript - 如何将文本标签附加到水平图例中各自的圆圈？

Question

我知道这是基本的 d3，但我在将水平图例标签的文本附加到各自的圆圈时遇到问题，这样每个圆圈及其文本标签之间就有统一的空间。

这是一个笨蛋:http://plnkr.co/edit/g1Mt62XcIylzGb4RRnop?p=preview

以下是一些有问题的代码:

li.selectAll("text")
    .data(items,function(d) { return d.key})
    .call(function(d) { d.enter().append("text")})
    .call(function(d) { d.exit().remove()})
    .attr("x",function(d,i) { return 12+i*75})
    .attr("y","0.39em")
    .text(function(d) { ;return d.key})

li.selectAll("circle")
    .data(items,function(d) { return d.key})
    .call(function(d) { d.enter().append("circle")})
    .call(function(d) { d.exit().remove()})
    .attr("cx",function(d,i) { return i*7.1+"em"})
    .attr("cy",0)
    .attr("r","0.4em")
    .style("fill",function(d) { console.log(d.value.color);return d.value.color}) 

Answer 1

不确定这是否有帮助，但我的代码位于 https://steeplechasers.org/membership/membership-statistics/正在做类似类型的传奇。

参见https://steeplechasers.org/wp-content/themes/steeps/js/membership-stats.js并搜索图例以了解这是如何完成的。

通常我会放入获得此示例的代码中，因为我自己并没有弄清楚。我希望这次我能这么做，这样我就可以引用原著了。不幸的是，在这种情况下我没有添加引用。