在D3中用箭头绘制有向边

时间:2012-11-26 10:27:13

标签: javascript d3.js

我尝试显示有向图以显示现象的时间演变。这是我的代码的一部分:

        path.links.0 {
        stroke: red;
    }

    path.links.1 {
        stroke: green;
    }

    marker#0 {
        stroke: #999;
        fill: #999;
    }

    marker#1 {
        stroke: #999;
        fill: #999;
    }

                            svg.append("svg:defs").selectAll("marker")
                            //.data(json.links)
                            .data(["1","0"])                                    
                            .enter().append("svg:marker")
                                .attr("id", String)
                                .attr("viewBox", "0 -5 10 10")
                                .attr("refX", 15)
                                .attr("refY", -1.5)
                                .attr("markerWidth", 6)
                                .attr("markerHeight", 6)
                                .attr("orient", "auto")
                              .append("svg:path")
                                .attr("d", "M0,-5L10,0L0,5");

                        var path = svg.append("svg:g").selectAll("path")
                            .data(force.links())
                            .enter().append("svg:path")
                                .style("stroke", function(d) { return fillLine(0); }) //only one color GRAY
                                .style("stroke-width", function(d) { return 2; }) //weight of marker
                                .style("stroke-dasharray", //here we select 0 = plain line; 5 = dotted line 
                                    function(d) { 
                                        if (d.type == 0) { 
                                            return lineType(d.type) //using lineType defined above
                                        } else { 
                                            return lineType(d.type) 
                                        }; 
                                    })
                                //.style("fill", "red")
                                .attr("class", function(d) { return "link " + d.type; })
                                .attr("marker-end", function(d) { return "url(#" + d.type + ")";
                                //.attr("marker-end", function(d) { return "url(#triangle)"; 
                                });

我的问题:我无法显示箭头......只有一条线。我尝试了很多样式和许多代码行,但我无法显示路径(三角形)的结尾。 拜托,你能帮帮我吗? 最好的问候。

1 个答案:

答案 0 :(得分:1)

你的"标记结束"属性应该引用标记的ID或其他CSS选择器。就目前而言,您可以使用" id"来定义标记。字符串,它与你在svg:path" marker-end"上引用的url()选择器不对应。