D3/SVG。如何将子 svg 元素定位到其父元素的范围之外？

使用d3，我有一个svg元素，我想将其作为子svg元素层次结构的父级。转折点是，我希望孩子们的位置超出其父母的范围：

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");

如果我运行这段代码，rect将是不可见的，由其父项剪裁。如何禁用此家长剪辑？

在<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>

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

相关内容

最新更新

热门标签：