Можно ли использовать d3.svg.symbol вместе с svg.marker

Question

В настоящее время я использую маркеры для построения стрелки между путями.

var def = viz.append("svg:defs")
    .selectAll(".traffic")
    .data(["green", "yellow", "red"]) ;// grey 

    def.enter().append("svg:marker")
    .attr("id", String)
    .attr("class","traffic")
    .attr("viewBox", "0 0 8 10")
    .append("svg:polyline")
    .attr("points","0,0 8,5 0,10 1,5")
    .attr("fill", String)
    ;

и мой путь назовет маркеры как

viz.selectAll("path").attr("marker-mid", "url(#red)");

Можно ли использовать d3.svg.symbol() вместо маркера или вместе с маркером?

Answer 1

d3.svg.symbol() Объект используется для генерации строки для атрибута "d" <path>, Таким образом, вы измените свой маркер, чтобы он содержал путь вместо ломаной линии и заменил атрибут "points" атрибутом "d" и использовал функцию символа для вычисления значения атрибута.

Единственное другое усложнение - убедиться, что символ аккуратно вписывается в маркер. Размер символов определяется по площади с размером по умолчанию 64 квадратных единицы. Я обнаружил, что мне нужно было создать 14 блоков viewBox с каждой стороны, чтобы они уместились без обрезки. (Если вы обнаружите, что символы слишком малы, установите markerWidth а также markerHeight атрибуты на <marker> элемент; по умолчанию 3, то есть в три раза больше ширины линии.) Символы предназначены для центрирования в точке (0,0) в их системе координат, поэтому viewBox также должен быть центрирован вокруг нуля.

Вы также должны быть осторожны с маркерами стиля, поскольку графика наследует стили от линии, к которой они прикреплены, а не от <marker> элемент.

Скрипка: http://fiddle.jshell.net/5hgSa/1/

var symbolGenerator = d3.svg.symbol()
        .type( function(d) {
             //sample function, not sure if you wanted them all the same symbol or not!
            var coloursToSymbols = {
                red:"cross",
                yellow:"square",
                green:"diamond"
            };
            return coloursToSymbols[d];
        });

var def = viz.append("svg:defs")
    .selectAll(".traffic")
    .data(["green", "yellow", "red"]) ;

def.enter().append("svg:marker")
    .attr("id", String)
    .attr("class","traffic")
    .attr("viewBox", "-7 -7 14 14")
    .append("svg:path")
    .attr("d", symbolGenerator)
    .style("fill", String) //use style, not attribute, to override the CSS on the path
    ;