如何在D3中水平居中A(响应)多行传奇

Question

我正在建立一个传奇，以使用我在D3 V4中创建的甜甜圈图。到目前为止，我设法添加了彩色框和文字，传说将其包裹到容器中。

传说位于中心，但目前左侧对齐。我希望它们像这样的图表下以居中为中心(根据容器宽度，调整大小(。还有一个奇怪的问题，第一个传说项目在resize/redraw上消失。

由于我是D3的完整新手，所以我在很大程度上依靠现有示例，而且我找不到类似于我想实现的东西的东西。我使用此plunker作为图表的基础，并将此块用于传奇包装代码。

这是我的传奇代码(在这里完整的JSFIDDLE(：

var legendRectSize = 18;
var legendSpacing = 4;
var legendWrap = svg.append('g')
  .attr('class', 'legendwrap');
var legend = svg.select('.legendwrap').selectAll('.legend')
  .data(color.domain())
  .enter()
  .append('g')
  .attr('class', 'legend');
legend.append('rect')
  .attr('width', legendRectSize)
  .attr('height', legendRectSize)
  .style('fill', color)
  .style('stroke', color);
legend.append('text')
  .attr('x', legendRectSize + legendSpacing * 1.5)
  .attr('y', legendRectSize - legendSpacing)
  .text(function(d) {
    return d;
  });
var ypos = 0,
  newxpos = 0,
  maxwidth = 0,
  xpos;
legend
  .attr("transform", function(d, i) {
    var length = d3.select(this).select("text").node().getComputedTextLength() + 40;
    xpos = newxpos;
    if (width < xpos + length + 0) {
      newxpos = xpos = 0;
      ypos += 30;
    }
    newxpos += length;
    if (newxpos > maxwidth) maxwidth = newxpos;
    return 'translate(' + xpos + ',' + ypos + ')';
  });
var legendWidth = d3.select('.legendwrap').node().getBoundingClientRect().width;
legendWrap
  .attr("transform", function(d, i) {
    return "translate(" + (width - legendWidth) / 2 + "," + (height + 20) + ")";
  });

事先感谢您的任何帮助或建议！

Answer 1

我遇到了相同的问题，即在谷歌搜索时，我遇到了您的问题。有一半的答案，我使用了您的代码并将其修改为实现您的问题中所述的中心对齐。

基本上是通过传说项目迭代的，首先是为每行计算x偏移，然后将其通过将其添加到该行中的每个传说项目的x位置。

以下是两个循环，

    var ypos = 0, newxpos = 0, rowOffsets = [];
    var legendItemsCount = svg.selectAll('.legend').size();
    legend.attr("transform", function (d, index) {
        var length = d3.select(this).select("text").node().getComputedTextLength() + (legendRectSize + legendSpacing * 3);
        if (width < newxpos + length) {
            rowOffsets.push((width - newxpos) / 2);
            newxpos = 0;
            ypos += 30;
        }
        d.x = newxpos;
        d.y = ypos;
        d.rowNo = rowOffsets.length;
        newxpos += length;
        if (index === legendItemsCount - 1)
            rowOffsets.push((width - newxpos) / 2);
    });
    legend.attr("transform", function (d, i) {
        var x = d.x + rowOffsets[d.rowNo];
        return 'translate(' + x + ',' + d.y + ')';
    });