| Re: javascript y svg
Cita:
Iniciado por derkenuke  Hola ratamaster:
Hace tiempo trabaje un poco bajo SVG (si me confirmas que IE7 lo implementa por defecto, entonces proseguiré trabajando con él). Lamentablemente no, aún no es nativo de ie, pero esperemos que en un futuro muy cercano lo sea, como el caso de flash. Cita:
Iniciado por derkenuke El funcionamiento de javascript es parecido en un documento SVG, podemos trabajar por nodos y modificar sus atributos.
He tenido que modificar la etiqueta de apertura <svg> para que FF2 lo renderizase bien, y me he inventado un atributo ID para los elementos PATH, no sé si es correcto, pero funciona. ¿Qué quieres decir con esto? Puede ser que yo te lo haya pasdo mal, no?, las disculpas del caso. Cita:
Iniciado por derkenuke No sé si te he entendido bien. Si lo que quieres es ocultar el verde se hace tan sencillo como en un documento normal, con el estilo. Luego podemos pasar el PATH rojo a ser de color verde, y finalmente, moverlo horizontalmente las unidades que queramos. Lo he hecho como me has sugerido, con el array. Bien lo contaré com más detalle:
Estoy desarrollando una gráfica que se actualiza en tiempo real, tomando datos de una bd, es una mezcla de php-sql, javascript-ajax y svg.
Cuando la gráfica se inicializa, solo podemos ver los ejes (X y Y), y pasado 1 segundo (o lo que tarde el servidor en mandar nuevos datos), el PATH comienza a ser dibujado.
La IDEA PRINCIPAL, es que el svg no se refresque cuando el PATH llegue al último valor del eje de las x. Cuando el PATH llegue a este último punto, se debe correr todo el PAHT n veces hacia la izquierda.
¿Qué significa moverlo a la izquierda y para qué?
Bueno, lo quiero mover para así dar espacio a nuevos valores que serán dibujados a partir del último nodo.
Para lograr esto, tengo que:
1) Borrar N números de nodos, me refiero a los primeros
2) Correr el resto del PATH hasta el inicio del eje de las x dando así espacio para los nuevos nodos.
Mostré este ejemplo del rojo y el verde para mostrar al PATH cuando llega al fin del eje (el rojo), y como debería quedar luego de ser transladado hacia la izquierda. (aquí los transladé como 4 lugares, solo es un ejemplo)
¿Me explico?
Si has logrado hacerlo, por favor compartilo!!!!!!!! jejeje Cita:
Iniciado por derkenuke Tampoco tengo muy claro si se puede incrustar una etiqueta <script> dentro de <svg>... habría que revisar la documentación svg, sólo me la he mirado por encima... No necesito hacer esto, manejo todo el svg desde un js incluido en el archivo svg: Cita:
Iniciado por derkenuke Código PHP: <svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
baseProfile="full">
<g transform="translate(30, 50)">
<g>
<path stroke="black" stroke-width="2" d="M0,250 l0,5 l0,-5 l41.6667,0
l0,5 l0,-5 l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5
l0,-5 l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5 l0,-5
l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5 l0,-5
l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5 l0,-5 M0,250 l-5,0 l5,0 l0,-25
l-5,0 l5,0 l0,-25 l-5,0 l5,0 l0,-25 l-5,0 l5,0 l0,-25 l-5,0 l5,0 l0,-25
l-5,0 l5,0 l0,-25 l-5,0 l5,0 l0,-25 l-5,0 l5,0 l0,-25 l-5,0 l5,0 l0,-25
l-5,0 l5,0 l0,-25 l-5,0 l5,0"/>
<text x="-19" y="272" stroke="black">21:27</text>
<text x="22.6667" y="272" stroke="black">21:32</text>
<text x="64.3333" y="272" stroke="black">21:37</text>
<text x="106" y="272" stroke="black">21:42</text>
<text x="147.667" y="272" stroke="black">21:47</text>
<text x="189.333" y="272" stroke="black">21:52</text>
<text x="231" y="272" stroke="black">21:57</text>
<text x="277.167" y="272" stroke="black">22:2</text>
<text x="318.833" y="272" stroke="black">22:7</text>
<text x="356" y="272" stroke="black">22:12</text>
<text x="397.667" y="272" stroke="black">22:17</text>
<text x="439.333" y="272" stroke="black">22:22</text>
<text x="481" y="272" stroke="black">22:27</text>
<text x="-17" y="256" stroke="black">0</text>
<text x="-25" y="231" stroke="black">10</text>
<text x="-26" y="206" stroke="black">20</text>
<text x="-26" y="181" stroke="black">30</text>
<text x="-27" y="156" stroke="black">40</text>
<text x="-26" y="131" stroke="black">50</text>
<text x="-26" y="106" stroke="black">60</text>
<text x="-26" y="81" stroke="black">70</text>
<text x="-26" y="56" stroke="black">80</text>
<text x="-26" y="31" stroke="black">90</text>
<text x="-34" y="6" stroke="black">100</text>
</g>
<path id="elVerde" stroke="green" stroke-width="1" fill="none" d="
M0,50
L50,127.5
L83.3333,82.5
L125,175
L166.667,85
L208.333,177.5
L250,170
L291.667,187.5
L333.333,102.5
L375,122.5
L416.667,120"/>
<path id="elRojo" stroke="red" stroke-width="1" fill="none" d="
M0,217.5
L83.3333,50
L125,127.5
L166.667,82.5
L208.333,175
L250,85
L291.667,177.5
L333.333,170
L375,187.5
L416.667,102.5
L458.333,122.5
L500,120"/>
</g>
<script type="text/ecmascript"> <![CDATA[
// Ocultamos el verde
document.getElementById("elVerde").style.display = "none";
// Trabajamos con el rojo
var elRojo = document.getElementById("elRojo");
// Lo coloreamos de verde
elRojo.setAttribute("stroke", "green");
// Lo movemos horizontalmente las unidades deseadas
var elRojo_ptos = elRojo.getAttribute("d").split(" ");
// En elRojo_ptos están todos los puntos con el formato Lxx,xx
// Modificaremos la primera coordenada sumandole una variable incr_horiz
var incr_horiz = 20;
for(var i in elRojo_ptos) {
var suLetra = elRojo_ptos[i].charAt(0);
var xy = elRojo_ptos[i].substring(1, elRojo_ptos[i].length).split(","); //le quitamos la letra y separamos x de y
var nuevaX = parseInt(xy[0],10) + incr_horiz;
var nuevaXY = suLetra+nuevaX+","+xy[1];
elRojo_ptos[i] = nuevaXY;
}
// Ahora en elRojo_ptos[i] tenemos los mismos formatos solo que la X se ha modificado en incr_horiz unidades
elRojo.setAttribute("d", elRojo_ptos.join(" ") );
]]> </script>
</svg>
Si no era ese tu propósito y encuentras dificultades coméntame, seguro que lo podemos solventar.
Un saludo.
__________________
ratamaster |