D3/SVG。如何将 child svg 元素放置在其 parent 范围之外？

Question

使用 d3 我有一个 svg 元素，我想 parent 一个 child svg 元素层次结构。不同之处在于我希望 children 的位置超出其 parent 范围：

var svg,
    group;

svg = d3.select("body")
    .append("svg")
    .attr("width",  200)
    .attr("height", 100);

group = svg
    .append("g")
    .attr("transform", "translate(" + 400 + "," + 300 + ")");

group
    .append("rect")
    .attr("x", "0")
    .attr("y", "0")
    .attr("width", "300")
    .attr("width", "150");

如果我运行这段代码，矩形将不可见，被其 parent 剪裁。如何禁用此 parental 剪辑？

Answer 1

在 <svg> 元素上设置 overflow="visible"。例如

    var svg,
        group;

    svg = d3.select("body")
        .append("svg")
        .attr("width",  200)
        .attr("height", 100)
        .attr("overflow", "visible");

    group = svg
        .append("g")
        .attr("transform", "translate(" + 400 + "," + 300 + ")");

    group
        .append("rect")
        .attr("x", "0")
        .attr("y", "0")
        .attr("width", "300")
        .attr("height", "150");

html, body {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body></body>

（请注意，您可能需要全屏才能看到矩形）

D3/SVG。如何将 child svg 元素放置在其 parent 范围之外？

D3/SVG. How do I position a child svg element beyond its parent's extent?

d3.js

svg

hierarchical-data