d3グラフの凡例が重複しています

Question

これらの特定の凡例が互いに重なっている理由を特定するのを助けることができますか？

これは私が何の問題があるか、多くのデータの伝説に応じて空間にそれを伝説を取得していないために、こので遊んでてきた伝説や間隔

lSpace = WIDTH/dataGroup.length; 
vis.append("text") 
.attr("x", (lSpace/2) + i * lSpace) 
.attr("y", HEIGHT) 
.style("fill", function() { // Add the colours dynamically 
    return d.color = color(d.key); 
}) 
.attr("class", "legend") 
.on('click', function() { 
    var active = d.active ? false : true, 
    opacity = active ? 0 : 1; 
    // Hide or show the elements based on the ID 
    d3.select("#tag" + d.key.replace(/[)(]/g, '')) 
    .style("opacity", opacity); 
    // Update whether or not the elements are active 
    d.active = active; 
}) 
.text(d.key); 

を構築するための私のコードです。残念なことに、私が伝説の空間をどのように配置しても、他のものと重なるものが得られます。 https://jsfiddle.net/9gzcbajx

Answer 1

私は個人的にいつもgコンポーネントに伝説をラップすることを好む、それはそれは、コンテンツのサイズですベースの翻訳：ここ

はフィドルです。

その方法は、&読める

キーコードを保存し、より多くのスペースは、私がループ

から描く伝説をデカップリングしていることに、注意してくださいあなたの fiddle

を更新しました。この

var startX = 30; 

legends.each(function(d, i, arr) { 
    var wrapper = d3.select(this); //this is g 
    var text = wrapper.select('text'); 
    var bbox = text.node().getBBox(); 
    wrapper.attr('transform', 'translate(' + startX + ')'); 
    startX += bbox.width + 35; 
}) 

です