Можно ли импортировать svg-формы в d3.js?

Первый день с d3.js, хорошо, но мне нужно изменить формы круга заполнителя на нечто более сложное.

Могут ли SVG-формы, созданные мной, скажем, Illustrator, "импортироваться" в диаграмму d3.js?

Я знаю, что могу перерисовать его в d3... но у меня болит голова прямо сейчас... er...

это простой пузырь с точкой:

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

Может ли это быть импортировано как форма?

Или есть способ перевести этот путь непосредственно в d3js?

Спасибо!

ОТВЕТЫ

Ответ 1

Если "импортированный" означает "часть" разметки страницы, а затем используется вашим кодом d3, то да, вы можете использовать svg defs element, чтобы сохранить определение вашей пользовательской формы. Затем в вашем коде создается элемент use для ссылки на него:

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

Вот полный пример вышеупомянутого подхода. Я использовал Inkscape, но концепция одинаков:

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

Обратите внимание, что пространство имен xlink в определении svg важно, чтобы элемент use работал правильно, и я вижу, что у вас уже есть его код:

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

Если при "импортировании" вы загружаете "на лету", тогда нужен другой подход, как это предлагает @LarsKotthoff. Но похоже, что вы просто хотите повторно использовать существующее определение формы, и вышеупомянутый подход позволяет вам это сделать. Элемент <g> устанавливает положение фигур, а затем добавляется дочерний элемент node <use>, чтобы вытащить фактическую форму, определенную ранее.

Определение формы находится в элементе svg в теле, а не в самом javascript. Это отличается от многих примеров D3.js, которые имеют элемент svg, созданный динамически с помощью кода javascript.

Единственное соединение между ними - это идентификатор строки, который вы ввели в href ( "myshape" в этом случае), чтобы соответствовать идентификатору в разделе defs:

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