Modifica di un file SVG in HTML utilizzando d3

questo è il mio primo post quindi cercherò di verificare che segua l'etichetta di postazione appropriata.Modifica di un file SVG in HTML utilizzando d3

Non ho alcuna esperienza con html, d3 o javascript. Ho comunque qualche esposizione a xml e svg. Sto cercando di lavorare con questo tutorial: [http://bost.ocks.org/mike/circles/]. Ho passato diverse ore ieri tentando inutilmente di completare il primo passo, che è quello di cambiare il colore e il raggio dei tre cerchi usando d3.selectAll(). Ho letto diversi post qui e ho guardato altri tutorial ma non posso per la vita di me rendere i cerchi blu. Sfortunatamente il tutorial non mostra mai l'interezza del loro codice. Sono stato in grado di visualizzare i tre cerchi neri (svg originale) nel mio browser ma non riesco a ottenere d3 per selezionarli ed effettuare le modifiche. Non sono nemmeno sicuro se l'xml sia incorporato nell'html o se sia esterno e letto in qualche modo.

Qualcuno potrebbe pubblicare l'html che si utilizzerà per eseguire questa operazione? Qualsiasi assistenza sarebbe molto apprezzata.

Ecco il codice XML corrispondenti ai circoli:

<svg width="720" height="120"> 
<circle cx="40" cy="60" r="10"></circle> 
<circle cx="80" cy="60" r="10"></circle> 
    <circle cx="120" cy="60" r="10"></circle> 
</svg>

E qui è il codice per apportare le modifiche:

var circle = d3.selectAll("circle"); 
circle.style("fill", "steelblue"); 
circle.attr("r", 30);

fonte

2015-07-21 e7h3r

Penso che il mio errore è stato malinteso come il tutorial mi aspettava per apportare le modifiche. Alla fine ho capito che ho bisogno di inserire i comandi per cambiare colore, ecc. Tramite strumenti di sviluppo. Grazie per l'aiuto lhoworko e Mark. – e7h3r

Il vostro codice è corretto. Immagino che tu non stia mettendo tutto insieme correttamente. Ecco l'esempio più breve:

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <svg width="720" height="120"> 
 
     <circle cx="40" cy="60" r="10"></circle> 
 
     <circle cx="80" cy="60" r="10"></circle> 
 
     <circle cx="120" cy="60" r="10"></circle> 
 
    </svg> 
 
    <script> 
 
     var circle = d3.selectAll("circle"); 
 
     circle.style("fill", "steelblue"); 
 
     circle.attr("r", 30); 
 
    </script> 
 
    </body> 
 

 
</html>

fonte

2015-07-21 16:28:44 Mark

Il codice sembra buono, ci deve essere un altro problema. Dai un'occhiata a questo violino per dimostrare cosa dovrebbe accadere. Ignora la transizione/durata/ritardo, è solo per rallentare tutto in modo che sia facilmente visibile.

http://jsfiddle.net/s6u5my8k/

var circle = d3.selectAll('circle') 
    .transition().duration(750).delay(750) 
    .style('fill', 'steelblue') 
    .attr('r', 30);

fonte

2015-07-21 16:31:29 lhoworko

Modifica di un file SVG in HTML utilizzando d3

risposta

Problemi correlati