D3 / SVG。如何将子svg元素定位超出其父级范围？ [英] D3/SVG. How do I position a child svg element beyond its parent's extent?
本文介绍了D3 / SVG。如何将子svg元素定位超出其父级范围？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用 d3 我有一个 svg 元素，我想父子化 svg 元素层次结构。这个扭曲是我想要的孩子定位超出其父范围：
var svg，
group;
svg = d3.select（body）
.append（svg）
.attr（width，200）
.attr高度，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将是不可见的，如何禁用此家长式剪辑？
解决方案
设置 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 +））; set.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> / pre>
（请注意，您可能需要将此屏幕全屏才能看到rect）
Using d3 I have an svg element that I want to parent a child svg element hierarchy. The twist is I want the children positioned beyond its parent extent:
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");
If I run this code the rect will be invisible, clipped by its parent. How do I disable this parental clipping?
解决方案
Set overflow="visible" on the <svg> element. E.g.
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>
(Note that you probably need to make this full screen in order to see the rect)
这篇关于D3 / SVG。如何将子svg元素定位超出其父级范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
