d3.js:在其父<g>元素中水平地居中一个大小未知的<svg>元素

Question

我正在d3.js中创建一个决策树，并且在父svg元素中对它的g元素进行调整有困难。G元素的宽度未知。

我将如何使g元素水平中心化？

如果你需要代码样本，让我知道，我会张贴。谢谢!

编辑：

var svg = d3.select("body")
              .append("svg")
                .attr("width", width)
                .attr("height", height)
              .append("g")
                .attr("transform", "translate(0,40)")
                .attr("id", "decision-tree");
var box = d3.select("#decision-tree").getBBox();

这将导致控制台中出现错误：

Uncaught :d3.d3.select(.).getBBox不是函数

我似乎找不到任何通过谷歌在d3.js中使用getBBox的例子。如果你知道的话，你能联系一些例子吗？

Answer 1

您可以在svg元素之前附加一个center元素，以便将整个svg水平置于中心。但是在svg之后和g之前插入一个g元素是行不通的。您必须使用此解决方案或使用变量来转换g元素。有关示例，请参见以下代码：

var svg = d3.select("body")
            .append("center")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
svg.append("g")
   .append("text")
   .text("Blah Blah Blah")

请注意，以下内容不会将text定位在g的中心

var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
svg.append("center")
   .append("g")
   .append("text")
   .text("Blah Blah Blah")