Question

我知道这是基本的d3，但我无法将水平图例标签的文字附加到各自的圆圈上，这样每个圆圈与其文字标签之间就有一个统一的空间。

这是一个Plunker：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

您使用两种不同的间距方法：

.attr("cx",function(d,i) { return i*7.1+"em"}) // every 7.1 em

.attr("x",function(d,i) { return 12+i*75})     // every 75 pixels, offset 12

您需要使用相同的乘数，否则圆与文本之间的距离将随i而变化。尝试：

.attr("cx",function(d,i) { return i*75 })  // every 75 pixels

.attr("x",function(d,i) { return 12+i*75}) // every 75 pixels, offset 12

查看更新的plunker here。

Answer 2

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

请参阅https://steeplechasers.org/wp-content/themes/steeps/js/membership-stats.js并搜索图例以了解如何完成此操作。

通常我会在我得到这个例子的代码中加入，因为我自己并没有弄明白。我希望我这次做，以便我可以参考原作。不幸的是，在这种情况下我没有添加引用。

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

2 个答案: