I am trying to implement the following example

For large graphs, I just want the graph to not get cut-off and allow scrolling, once user drags it outside the current border.

I tried adding the overflow:scroll property to the svg element, but that doesn't seem to work. I am new at this javascript/d3.js programming and would be glad if someone can point out the error or just guide me in the right direction.

I am trying to implement the following example

http://bl.ocks/mbostock/4566102

For large graphs, I just want the graph to not get cut-off and allow scrolling, once user drags it outside the current border.

I tried adding the overflow:scroll property to the svg element, but that doesn't seem to work. I am new at this javascript/d3.js programming and would be glad if someone can point out the error or just guide me in the right direction.

• javascript
• svg
• d3.js

• Is this example of panning the kind of thing you're looking for? bl.ocks/mbostock/3892919 – Richard Marr Commented Aug 3, 2013 at 6:39
• @RichardMarr Thanks. That is actually what I want to do but in the static graph. I don't see a drag behaviour defined in the example. Does the zoom function handle it automatically? – frustatedCoder Commented Aug 3, 2013 at 7:57

2 Answers 2

What about making the svg large enough, but wrapping it into a smalle div with overflow: auto?

html

<div class="outer">
    <div class="inner">
        <svg></svg>
    </div>
</div>

css:

.outer {
    width: 400px;
    height: 300px;
    overflow: auto;
}
.inner {
    width: 800px;
    height: 600px;
}
svg {
    display: block;
    width: 100%;
    height: 100%;
}

Demo

You can drag the red circle out of the visible area.

I'm afraid this will not be possible without javascript intervention. The svg root element must have a defined width and height, and it won't adapt at any extent to its contents.

If you are going for google, your question is more about svg than about d3.

I think the only possibility is to use javascript, in order to increase the sizes of svg when one object goes behind it. In this way, though, i can't figure out how to make it work for the left side, it bees plicated.

I think it's better to tackle the problem with the solutions that d3 can offer you, like the zoom behaviour suggested above. And generally if you are new in this field i can suggest you to think the interaction before going for the implementation, picking examples from the d3 gallery in order to better understand what you really want.