1

我有一个堆积条形图。我想将图例放置在图表区域末端上方并像这样居中传奇

我创建了一个 Fiddle Here Legend Fiddle

但是我在将图例定位在正确位置以便它也可以在 IPAD 上工作时遇到了问题。我知道一些问题

.attr("transform", function(d, i) { return "translate(-180," + i * 20 + ")"; });

您能否帮助将图例放置在正确的位置。谢谢君扬

4

1 回答 1

2

如果您希望它在移动设备上正确显示，您可能应该用动态视口查询替换大部分静态元素大小。然而，让图例正确显示并不明确要求这样做。

我在上边距添加了 10px：

var margin = {top: 30, right: 20, bottom: 30, left: 40},

然后我更改了应用于图例元素的变换

       .attr("transform", function(d, i) { return "translate("+ ((i * 50) + (width/2)-25)  +"," + (-margin.top) + ")"; });

我还必须删除 rect 和 text 元素上的“x”属性。当您尝试将一个元素放置在两个不同的位置时，它会变得令人困惑，因此在此处删除它可以让您专注于使用组变换正确定位它。

      legend.append("rect")
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);
  legend.append("text")
    .attr("dx", -4)
    .attr("dy", ".8em")
    .style("text-anchor", "end")
    .text(function(d) { return d; });

http://jsfiddle.net/QDVUc/1/

于 2013-10-02T09:44:45.737 回答