가로 범례에서 각 원에 텍스트 레이블을 추가하는 방법은 무엇입니까?

Question

저는 이것이 초등 D3 인 것을 알고 있습니다. 그러나 각 원과 텍스트 레이블 사이에 일정한 공간이 있도록 수평선 범례 레이블의 텍스트를 해당 원에 추가하는 데 문제가 있습니다. 당신은 같은 승수를 사용할 필요가

.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 

: 당신은 두 개의 서로 다른 간격 방법을 사용하고

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

을 : http://plnkr.co/edit/g1Mt62XcIylzGb4RRnop?p=preview

여기 문제가되는 코드의 일부입니다 : 여기

은 Plunker입니다 그렇지 않으면 원과 텍스트 사이의 거리가 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