javascript - d3.js 获取图表外的图例

Question

我正试图在制图区域之外获取图表的图例。

这是边距:

var margin = {top: 50, right: 200, bottom: 50, left: 40};
        var width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

首先我创建了 svg:

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

因此，根据我的理解，我现在拥有 svg canvas 元素和其中包含图表的 g。我正在尝试向右边距添加更多内容，因此我可以在 svg Canvas 和附加到它的 g 之间获得一些空间，其中包含图表。然后我想把我的传奇放在那个空旷的地方。

这是我添加图例的地方:

//add legend
            var legend = svg.append("g")
                .attr("class", "legend")
                .attr("height", 300)
                .attr("width", 200)
                .attr("transform", "translate(-1000,50");

即使我追加到 SVG 元素，它也追加到 svg 元素中的 g。所以，无论我如何翻译它或试图让它在屏幕上显示得更正确，它都不会超过内部 g 的宽度。

在排除故障时，我看到外部 SVG 元素的高度为 960，宽度为 500。附加到其上的 g 的转换/转换为 40,50。宽度最终为 839px x 433.223px(不确定我是否理解)。由于内置边距，外部 svg 现在有一堆空间。

所以我正在尝试增加附加到 svg 的 g 的宽度，这样我就可以将我的图例作为 g 的子项并将其移动到边距创建的空白区域。或者，我正在尝试创建另一个 g，它是第一个 g 的同级，然后我可以使用边距创建的空白空间。

我无法开始工作，也不知道哪种方式最好。

Answer 1

注意变量 svg正在分配给 <g>嵌套在 <svg> 中

svg = d3.select("body").append("svg")
        .attr("width",  width  + margin.left + margin.right)
        .attr("height", height + margin.top  + margin.bottom)
        .append("g") // <-- This is what svg is currently being assigned to
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

因此，当您稍后执行 var legend = svg.append("g") 时，您实际上是将图例附加为上述 <g> 的子项.这就是您描述的在开发工具中看到的内容。

一个含义是 translate()将你应用到外部的变换 <g>影响内部<g> (即 <g> 的内部 legend 的翻译添加到外部 <g> 的翻译)。

您可能希望像这样拆分:

var svg = d3.select("body").append("svg")
            .attr("width",  width  + margin.left + margin.right)
            .attr("height", height + margin.top  + margin.bottom);

var inner = svg.append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

然后更改您的代码以将现有图表绘制到 inner 中而不是 svg .

因此，var legend = svg.append("g")将附加图例作为 inner 的 sibling ，以及您应用于 legend 的任何翻译将相对于 svg 的左上角(与 inner 的左上角相反，由 margin 翻译)

您可能想翻译 legend像这样:

var legend = svg.append("g")
               .attr("transform", "translate(" + width - margin.right + "," + margin.top + ")");

这会将图例移动到图表的右端，MINUS margin.right .这样，您可以调整 margin.right为legend创造足够的空间.

最后，注意调用

legend
  .attr("height", 300)
  .attr("width", 200)

什么都不做，因为对于 svg <g> ，没有办法显式设置宽度和高度。无论如何，这些意义不大，因为 svg 没有 html 布局的“流”行为。开发工具中显示的宽度和高度是由 <g> 的子项边界产生的隐式边界。 . (如果需要，有一种方法可以使用 getBBox() 函数在 javascript 中获取这些计算边界)。