d3.js статический график скроллинг

Question

Я пытаюсь реализовать следующий пример

http://bl.ocks.org/mbostock/4566102

Для больших графов, я просто хочу график, чтобы не получить отсечку и позволяют прокрутки, когда пользователь перетаскивает его за пределы текущая граница.

Я попытался добавить свойство переполнения: прокрутки к элементу svg, но это не работает. Я новичок в этом javascript/d3.js программировании и был бы рад, если кто-то может указать на ошибку или просто вести меня в правильном направлении.

Answer 1

Как насчет того, чтобы svg достаточно большой, но обертывая его в div smalle с переполнением: 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

Вы можете перетащить красный круг из видимой области.

Answer 2

Боюсь, что это будет невозможно без вмешательства javascript. Корневой элемент svg должен иметь определенную ширину и высоту, и он не будет в какой-то мере адаптироваться к его содержимому.

Если вы собираетесь искать в Google, ваш вопрос больше о svg, чем о d3.

Я думаю, что единственная возможность - использовать javascript, чтобы увеличить размеры svg, когда один объект идет за ним. Таким образом, я не могу понять, как заставить его работать с левой стороны, он становится сложным.

Я думаю, что лучше решить проблему с помощью решений, которые может предложить вам d3, например, предложенное выше поведение масштабирования. И вообще, если вы новичок в этой области, я могу предложить вам подумать о взаимодействии перед тем, как перейдет к реализации, выбрав примеры из галереи d3, чтобы лучше понять, чего вы действительно хотите.