CODEWITHSUNDEEP
d3.jssvghierarchical-data
dugla
dugla

Reputation: 12954

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

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?

Upvotes: 1

Views: 1294

Answers (1)

Robert Longson
Robert Longson

Reputation: 124129

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)

Upvotes: 1

Related Questions