Отзивчива ос с процентни координати

В опит да изградя адаптивна точкова графика с d3.js, използвам координати, базирани на %, в елемент 100% x 100% svg.

Как мога да .call(axis) и да го накарам да очертае оста, като използва %, а не px стойности, така че те винаги да отговарят на svg и начертаните данни?

Трябва ли ръчно да начертая осите в този случай? Ако е така, как бих могъл да получа редовните стойности на отметките за всяка ос?

<svg width="100%" height="100%">
    <g class='data'>
        <circle cx='1%' cy='2%' />
        <circle cx='3%' cy='12%' />
        <circle cx='10%' cy='24%' />
    </g>
    <g class='axis'>
        <!-- is there a way to generate the axis ticks with x=% y=% ? -->
    </g>
</svg>

javascript svg charts d3.js graph
person yellow-saint    schedule 16.06.2015    source източник
comment
Можете ли да ни покажете пример за вашето маркиране? Трудно е да разберете какво се опитвате да направите – искате ли самият SVG елемент да реагира, т.е. преоразмеряване спрямо промените в прозореца/оформлението, или вътрешните SVG компоненти да реагират?   -  person Terry    schedule 16.06.2015
comment
@Terry Добавих опростен пример за това как изглежда в момента.   -  person yellow-saint    schedule 16.06.2015

Отговори (1)


arrow_upward
1
arrow_downward

Това не е възможно с D3. Компонентът на оста ще генерира ос, която съответства на свързания диапазон, т.е., за да направите определен размер, трябва да промените изходния диапазон на свързания мащаб. Можете да направите това доста лесно по отзивчив начин, като изчислите размера на диапазона по отношение на размера на прозореца и актуализирате оста, когато това се промени, например

xScale.range([0, window.innerWidth]);
person Lars Kotthoff    schedule 16.06.2015
comment
Можете ли да дадете бърз пример за това как бихте изчислили това? - person yellow-saint; 17.06.2015
comment
Добавих това към отговора. - person Lars Kotthoff; 17.06.2015
comment
А, разбирам, има смисъл. Така че потенциално бихте могли да направите нещо като function onResize() { xScale.range([ 0, $('#svg').outerWidth() ]) } - person yellow-saint; 18.06.2015