水平凡例のそれぞれの円にテキストラベルを追加するにはどうすればよいですか？

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

これが役立つかどうかわかりませんが、https://steeplechasers.org/membership/membership-statistics/のコードでも同様のタイプの凡例が行われています。

https://steeplechasers.org/wp-content/themes/steeps/js/membership-stats.jsを参照し、これがどのように行われたかを見るために凡例を検索してください。

通常、私はこの例を得たコードに入れました。私はそれを自分で把握していませんでした。私は元の作品を参照することができるように私はこの時間をしたいと思います。残念ながら、私はこの場合に参照を追加しませんでした。

Answer 2

次の2つの異なる間隔のメソッドを使用している：あなたは同じ乗数を使用する必要が

.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を更新してください。