可以与svg.marker一起使用d3.svg.symbol [英] Is it possible to use d3.svg.symbol along with svg.marker

问题描述

目前我使用标记来绘制路径之间的箭头。

Currently I am using markers to plot arrow in between paths.

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（）而不是marker或标记吗？ / p>

Is is possible to use d3.svg.symbol() instead of marker or along with marker ?

推荐答案

d3.svg.symbol（）对象用于生成< path> 的d属性的字符串。因此，您将标记更改为包含路径而不是折线，并将points属性替换为d属性，并使用符号函数计算属性值。

The d3.svg.symbol() object is used to generate the string for the "d" attribute of a <path>. So you change your marker to contain a path instead of a polyline and replace the "points" attribute with a "d" attribute and use the symbol function to calculate the attribute value.

唯一的另一个复杂因素是确保符号完全符合您的标记。符号的大小根据区域的默认大小为64平方单位，我发现我不得不使viewBox 14单位在每一侧，让他们适合没有裁剪。 （如果您发现符号太小，请在上设置 markerWidth 和 markerHeight < marker> 元素;默认值为3，也就是线宽的三倍）。符号设计为在它们的坐标系统中以（0,0）为中心，因此viewBox也应以零为中心。

The only other complication is to make sure that the symbol fits neatly within your marker. The symbols are sized by area with a default size of 64 square units, I found I had to make the viewBox 14 units on each side to get them to fit without cropping. (If you find the symbols are too small, set the markerWidth and markerHeight attributes on the <marker> element; the default is 3, aka three times the line width.) The symbols are designed to be centered at (0,0) within their coordinate system, so the viewBox should also be centered around zero.

您还必须小心使用样式标记，因为图形从它们所附加的行继承样式，而不是从< marker> 元素。

You also have to be careful with styling markers, since the graphics inherit styles from the line they are attached to, not from the <marker> element.

小提琴： 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
    ;

这篇关于可以与svg.marker一起使用d3.svg.symbol的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！