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()对象用于生成<path>的“d”属性的字符串。因此，您将标记更改为包含路径而不是折线，并将“points”属性替换为“d”属性，并使用符号函数计算属性值。

唯一的另一个复杂因素是确保符号整齐地适合您的标记。这些符号按区域大小调整，默认大小为64平方单位，我发现我必须在每一侧制作视图框14个单元才能使它们适合而不需要裁剪。（如果您发现符号太小，请在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
    ;

是否可以使用d3.svg.symbol和svg.marker

1 个答案: