Czy można importować kształty svg w d3.js?

Question

Pierwszy dzień z d3.js, dobrze, ale muszę zmienić kształty kółek zastępczych na coś bardziej złożonego.

Czy kształty SVG, które stworzyłem w, powiedzmy, Illustrator, można "zaimportować" do wykresu d3.js?

wiem, że mogę przerysować go w D3 ... ale moja głowa boli teraz ... eee ...

to prosta bańka z punktu:

<?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> 

to może być importowany jako kształt?

Czy istnieje sposób na przetłumaczenie tej ścieżki bezpośrednio w d3js?

Dzięki!

Answer 1

Jeśli przez "zaimportowany" rozumiesz, że jest częścią znacznika strony, a następnie jest używany przez twój kod d3, to tak, możesz użyć svg defs element, aby zachować definicję własnego kształtu. Później w kodzie utworzyć element use odwołać go:

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") 

Oto pełna przykładem powyższego podejścia. Kiedyś Inkscape ale idea jest ta sama:

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

Zauważ, że xlink nazw w definicji SVG jest ważne dla element use działał prawidłowo, i widzę go mieć swój kod już:

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

Jeśli przez "importowane" rozumiesz "załadowany" w locie, potrzebne jest inne podejście, zgodnie z sugestią @LarsKotthoff. Ale brzmi to tak, jakbyś chciał ponownie użyć istniejącej definicji kształtu, a powyższe podejście pozwala to zrobić. Element <g> ustawia położenie kształtów, a następnie dodaje węzeł potomny <use>, aby pobrać rzeczywisty kształt zdefiniowany wcześniej.

Definicja kształtu znajduje się w elemencie svg w ciele, a nie w samym javascript. Różni się to od wielu przykładów D3.js, które mają element svg utworzony dynamicznie za pomocą kodu javascript.

Jedyne połączenie między nimi jest identyfikator ciąg znaków, który można umieścić w href („myShape” w tym przypadku), aby dopasować identyfikator w sekcji defs:

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