SVG Scaling and Coordinates

Question

Это мой первый проект SVG, и я не программист, но я играю в интерактивную инфографику. Мой предыдущий опыт в этой области исходит от работы с ActionScript.

Я использую простой SVG (без Raphael, D3 и т. Д.) И пытаюсь создать интерактивный барчер. Через некоторое начальное затруднение с SVG системы и масштабирования координат, я нашел код в Интернете, который обрабатывает postscaling перевод:

<text x="x_coord0" y="y_coord0" transform="scale(x_scale, y_scale) translate(-x_coord0*(x_scale-1)/x_scale, -y_coord0*(y_scale-1)/y_scale)" …>text</text> 

И я преобразовал его в этот JavaScript:

var translationfactor = ((0 - y_position)*(y_scalefactor - 1)/y_scalefactor); 
var matrix = "scale(1," + y_scalefactor + ") translate(0," + Number(translationfactor) + ")"; 
targetbar.setAttribute("transform", matrix); 

Проблема заключается в том, что я нужно, чтобы бары «переводились» обратно в базовую линию графика, а не в исходные местоположения их самых верхних точек. В настоящее время правильно масштабируется бары прижимаясь к верхней части диаграммы:

http://billgregg.net/miscellany/upsidedown-barchart.png

Я пытался несколько исправлений, в том числе подключить „недостающее высоту“ БАРС в translationfactor (бары начинают полную высоту диаграмму и динамически уменьшаться). Ничего не сработало. Часть моей проблемы заключается в том, что, помимо того, что я новичок в SVG, я могу смотреть на этот код весь день, и мой мозг все еще не может его разобрать. Умножение отрицательных чисел слишком абстрактно и на фундаментальном уровне я просто не «получаю» математику, что, конечно, затрудняет изменение кода.

Мои вопросы:

(1) Что такое исправление кода выше, чтобы позиционировать стержни обратно на базовой линии на графике?

(2) Существует ли более прозрачный, более пешеходный способ выполнения перевода? Моя первая мысль по этим строкам заключалась в том, что если высота бара уменьшается до 40% от его первоначального значения, то умножение исходного значения координаты Y на 250% должно привести к сбросу бара в исходное местоположение (по крайней мере, его верхнюю точку), но это похоже, не работает.

(3) Есть ли способ установить точку начала бара на дно? Во Flash это возможно, хотя, насколько я знаю, это руководство, а не программная задача.

(4) Есть ли метод, похожий на .localToGlobal() в ActionScript, который позволит мне избежать необходимости связываться с локальной системой координат?

Answer 1

За кулисами происходит математическая математика, и может быть трудно получить голову вокруг предварительного и последующего умножения массивов.

Не совсем понятно, чего вы пытаетесь достичь, но чтение между строками, похоже, вы хотите предоставить координаты графа в их исходной форме (ish) и иметь шкалу SVG и позиционировать их для вас (?)

Если это так, то я думаю, что решение проще, чем вы думаете.

Предполагая, что я прав, мы начнем с того, что выглядит следующим образом:

<?xml version="1.0" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 

    <g transform=""> 

    <rect x="0" width="1" height="5" fill="red"/> 
    <rect x="1" width="1" height="11" fill="green"/> 
    <rect x="2" width="1" height="12" fill="orange"/> 
    <rect x="3" width="1" height="8" fill="blue"/> 

    </g> 

</svg> 

Где x очевидна и длина стержня находится в height. y по умолчанию 0, поэтому он здесь не нужен.

Вы в основном хотите знать, что находится в transform, чтобы масштабировать и расположить столбцы на своей странице. Тот факт, что ваш график «перевернут», немного помогает. Потому что начало в SVG находится в левом верхнем углу.

Сначала примените шкалу. Давайте сделаем бруски 20 пикселей в ширину, и масштаб длины вверх 10.

<g transform="scale(20,10)"> 

Далее вы хотите расположить график на странице. Положим верхний левый угол на (40,40). В SVG преобразования объединяются в порядке (после умножения), поэтому для того, чтобы перевод был тем, что вы указали, и не умножался на шкалу, вы должны поместить его первым.

<g transform="translate(40,40) scale(20,10)"> 

Таким образом, окончательный SVG выглядит следующим образом:

<?xml version="1.0" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 

    <g transform="translate(40,40) scale(20,10)"> 

    <rect x="0" width="1" height="5" fill="red"/> 
    <rect x="1" width="1" height="11" fill="green"/> 
    <rect x="2" width="1" height="12" fill="orange"/> 
    <rect x="3" width="1" height="8" fill="blue"/> 

    </g> 

</svg> 

Выше была упрощена, предполагая, вы уже вычитают значения из вашей базы 20%. Если вы хотите сохранить чистые исходные значения, это возможно, но все становится немного сложнее. Вам нужно либо возиться как с значениями каждого бара, либо с помощью обрезки, чтобы скрыть часть бара выше 20%.

Для правильного подъема/нормальных графов. Все, что вам нужно сделать, это сделать отрицательный масштаб y и перевести график так, чтобы нижний -left - это то, где вы этого хотите.

<g transform="translate(40,140) scale(20,-10)"> 

Надеюсь, это поможет.