2013-03-07 3 views
2

All the examples Я смотрел на d3js.org, используя iframe, чтобы позиционировать верх и центр визуализации на странице.Лучший способ/с позиционирования d3 визуализации без iframe?

Когда я попытался вставить визуализацию на странице напрямую, без использования iframe, она опускается в нижнюю левую часть страницы под всеми другими элементами страницы.

Кто-нибудь знает какие-либо хорошие альтернативы для позиционирования, кроме использования iframe?

ответ

1

Трудно диагностировать, не видя этого .... Вы используете SVG? Если да, может быть, у вашего тега <svg> отсутствует display:block?

Больше в целом:

ДИВ, что кадры визуализации - тот, который имеет ширину меньше, чем ширина страницы - должен иметь margin: 0 auto центрировать его в пределах его родительский элемента. A bit more info here.

+0

Спасибо, примеры страницы d3.js gallery: https://github.com/mbostock/d3/wiki/Gallery Просмотр исходного кода на любом из них, и фактический vis содержится в iframe. – Kurtosis

+0

@ Kurtosis Я имел в виду, что это трудно диагностировать, не видя ВАШЕГО примера; внедрения вашей визуализации без iFrame. – meetamit

+0

Ах, извините, не в сети еще, все еще в dev. Посмотрите, что я могу сделать. – Kurtosis

2

Используйте DIV. Это то, чем я занимаюсь. Вы можете увидеть пример этого here -

2

Вы можете использовать CSS для этого:

svg{ 
    position:absolute; 
    top:50%; 
    left:0px; 
} 

В этом примере будет позиционировать его в нижней части экрана, выравнивается по левому краю. Ширина определяется в d3 при настройке высоты и ширины SVG, например, так:

var width = $(window).width(); 
var height = $(window).height()/2; 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

Очевидно (возможно, нет), вам не нужно использовать JQuery, чтобы получить ширину и высоту окна. При необходимости повторите операцию. Дело в том, что бит CSS.

Смежные вопросы