D3：改进我的形状文本链接

Question

这是一个技术/优化问题。在SA和bl.ocks中使用了许多来源我已经能够获得带有旋转文本的水平图例，如下所示。我出于专有原因对其进行了修剪。

以下是我使用的代码：

var svg_legend = d3.select("body").append("svg")
    .attr("width", width+margin.left)
    .attr("height", 180)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

rects=svg_legend.selectAll("rect")
.data(coldomain)
.enter().append("rect")
.attr("height", 15)
.attr("x", function(d, i) { return (i+1)*((width-margin.left)/coldomain.length); })
.attr("width", 15)
.style("fill", color);    

text = svg_legend.selectAll("text")
    .data(coldomain)
  .enter().append("text")
    .text(function(d){return d})
    .style("fill", 'black')
    .attr("y", 60)
    .attr("x", 0)
    .attr("text-anchor", "end")
    .style("font-size", "12px") 
    .attr("transform", function(d, i) { return "translate(" + (i)*((width-margin.left)/coldomain.length)+",0) rotate(-65," + 0+"," + 0+") "; })

因为这样可行，但似乎我应该能够在一次通过中完成矩形和文本，这样你就不必担心让它们排成一行，b / c文本会以某种方式与矩形动态同步。有没有更好的方法来实现上述目标？

感谢您的任何建议。

Answer 1

一种方法可能是在主组下创建组，将数据绑定到此组，翻译它们，然后将矩形和文本附加到每个组。该战略的大纲是：

var svg = d3.select('body').append('svg'),
    grp = svg.append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// Compute the actual translation and replace the zeros
var groups = grp.selectAll('g')
  .data(coldomain)
  .enter()
  .append('g')
  .attr('transform', function(d) { return 'translate(0, 0)'; });

// The rectangles are now relative to the parent group
groups.append('rect')
  .attr('x',   0)
  .attr('y', -10)
  .attr('width', 10)
  .attr('height', 10);

// The text position is now relative to the parent group 
groups.append('text')
  .attr('x', 0)
  .attr('y', 10)
  .text(function(d) { return d.name; });

绑定到组的数据项将传递给其子元素，在本例中为rect和text元素。