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

这是一个技术/优化问题。使用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文本将以某种方式与矩形进行动态同步。有没有更好的方法来实现上述目标

---

感谢您的建议。

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

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

元素。

谢谢！我试试看。MB在一个相关的主题上推荐了类似的东西，但我无法想象它是如何做到的。让我们假设它是有效的，并接受这一点作为答案：）。我添加这篇文章是为了让问题和答案更加完整：