È possibile importare forme svg in d3.js?

Question

Il primo giorno con d3.js, sta andando bene, ma ho bisogno di cambiare le forme dei cerchi segnaposto in qualcosa di più complesso.

Le forme SVG create in, ad esempio, Illustrator, possono essere "importate" in un grafico d3.js?

so di poter ridisegnare in d3 ... ma la mia testa fa male in questo momento ... ehm ...

si tratta di una semplice bolla con un punto:

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="77px" height="41px" viewBox="0 0 77 41" enable-background="new 0 0 77 41" xml:space="preserve"> 
<path fill-rule="evenodd" clip-rule="evenodd" fill="#999999" d="M0,13C0,5.82,5.82,0,13,0h51c7.18,0,13,5.82,13,13s-5.82,13-13,13 
    H47l-7,15l-7-15H13C5.82,26,0,20.18,0,13z"/> 
</svg> 

può che essere importato come forma?

Oppure c'è un modo per tradurre quel percorso direttamente in d3js?

Grazie!

Answer 1

Se per "importato" si intende parte del markup della pagina e quindi utilizzato dal codice d3, allora sì è possibile utilizzare svg defs element per contenere la definizione della forma personalizzata. Poi, più avanti nel codice si crea un elemento use fare riferimento a esso:

var node = svg.selectAll("g.node") 
    .data(nodes) 
    .enter() 
    .append("g") 
    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) 

node.append("use") 
    .attr("xlink:href","#myshape") 

Ecco un esempio completo di approccio di cui sopra. Ho usato Inkscape, ma il concetto è lo stesso:

http://bl.ocks.org/explunit/5988971

Nota che il namespace XLink nella definizione svg è importante per l'elemento use per funzionare correttamente, e vedo lo avete il vostro codice già:

xmlns:xlink="http://www.w3.org/1999/xlink" 

Se per "importato" si intende caricato al volo, è necessario un approccio diverso, come suggerito da @LarsKotthoff. Ma sembra che tu voglia solo riutilizzare una definizione di forma esistente, e l'approccio sopra ti permette di farlo. L'elemento <g> imposta la posizione delle forme, quindi viene aggiunto il nodo figlio <use> per inserire la forma effettiva definita in precedenza.

La definizione della forma è nell'elemento svg nel corpo, non nella javascript stessa. Questo differisce da molti esempi di D3.js che hanno l'elemento svg creato dinamicamente dal codice javascript.

L'unico collegamento tra i due è l'ID stringa che si mette nel href ("myShape" in questo caso) per abbinare l'id nella sezione defs:

node.append("use").attr("xlink:href","#myshape")