CODEWITHSUNDEEP
javascriptjquerycsssvgd3.js
bologna
bologna

Reputation: 33

How do I prevent clipping of an SVG drawn with the D3 library (in Javascript)?

I'm trying to create a large SVG rectangle that listens for mouse clicks, but the width of the SVG seems to cap out at around 300 px, regardless of the value set. I read numerous examples online, and thought that it might be caused by viewbox and viewport settings (http://jonibologna.com/svg-viewbox-and-viewport/) but haven't had luck with that. Below is a simplified version of my program that demonstrates the problem.

(Also here is a jsfiddle: http://jsfiddle.net/bologna/pyLLu6rh/)

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<body>
    <div class="container">
        <div class="page-header">
                <h1>Title</h1>

            <p>Blah blah blah...</p>
        </div>
        <div id="results"></div>
        <div id="legend">
            <p style="font-size:80%">The orange dots represent buses as they arrive to pick up passengers, and the green dots represent people when they get to the bus stop.</p>
        </div>
        <div id="touch-area"></div>
    </div>
    <!-- /class="container">-->
</body>

And here is the script:

initGraphs();

function initGraphs() {

    var svg = d3.select("#touch-area").append("svg")
        .append("g");
    // move range above overlay and call the overlay event handlers from there
    svg.append("rect")
        .attr("id", "touch-area1")
        .attr("class", "touch-area1")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", "400px")
        .attr("height", "60px")
        .attr("viewbox", "0 0 500 500")
        .attr("fill", "blue")
        .on("click", mouseclick);
};

function mouseclick() {
    console.trace('mouse click!!!');
    var pos = d3.mouse(this);
    console.trace('mouse ' + pos[0] + '  ' + pos[1]);
};

I'm new with HTML5, javascript, jQuery, and D3, so it could very well be something simple?? Many thanks if you can solve this before I start resorting to incantations.

Upvotes: 1

Views: 631

Answers (1)

meetamit
meetamit

Reputation: 25157

The SVG itself clips any of its content that lies outside the SVG's bound. You code doesn't show whether you're doing anything to ensure that the SVG is large enough for the rect. You need to:

var svg = d3.select("#touch-area").append("svg")
    .attr("width", 400)
    .attr("height", 60)
    .append("g");

or you can achieve the same thing by setting width and height from a css file (but then you have to use 400px).

Finally, when setting size via CSS, I've encountered at least one browser (Firefox, I think) where you also have to make the SVG display:block or display:inline-block for the size to apply.

Upvotes: 1

Related Questions