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组件中，然后根据其内容大小对其进行翻译。

这样可以节省更多空间和可读性

关键代码是这个

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;
})

我已经更新了你的小提琴

请注意，我已将图例图与循环解耦