1

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

感谢您的任何建议。

4

1 回答 1

2

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

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

绑定到组的数据项被传递给它们的子元素，在本例中为rectandtext元素。

于 2013-07-09T02:04:04.953 回答