javascript - 将 svg 文本与 d3.js 图例对齐

Question

我正在尝试使用 Susie Lu's legend plugin .

这是目前为止的一些工作；

http://plnkr.co/edit/wrOWPYu4PAqwr8f5OOjw?p=preview

下图是我想要实现的(只是布局，内容/颜色无关紧要)

我已经在附加到文本/矩形的类上尝试了标准的 float:left + display: inline 但它对我不起作用。也许我犯了一个错误。我不确定是否应该在 d3 脚本或 css 文件中执行此操作？

希望这是一个简单的修复 - 非常感谢任何帮助!

谢谢

Answer 1

那些属性(float:left + display:inline)只对html元素有效，这里的图例库生成的是svg

这是可能的，但需要一些工作

http://plnkr.co/edit/YRFRWEtMFDmje06Mg5KY?p=preview

 var cells= d3.selectAll(".cell");
   var cellGap = legendLinear.shapeWidth()+(legendLinear.shapePadding()/4);

   cells.select("text")
      .attr ("transform", "translate("+cellGap+" 13)")
      .style ("text-anchor", "start")
   ; 

   var offset = 0;
   cells.each (function(d,i) {
      var d3sel = d3.select(this);
      var textWidth = d3sel.select("text").node().getComputedTextLength();
      var offsetInc = textWidth + legendLinear.shapeWidth() + legendLinear.shapePadding();
      d3sel.attr("transform", "translate("+offset+" 0)");
      offset += offsetInc;
   });

这首先将每个图例“单元格”的文本元素移动到色样的右侧而不是下方。

然后它使用 .getComputedTextLength() 移动保持标签和样本的 g 元素水平分开，具体取决于标签的宽度(以及样本和声明的填充)和运行总计偏移量。