0

我试图展示一个有向图来展示一种现象的时间演变。这是我的代码的一部分：

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

我的问题：我不能显示箭头......只有一条线。我尝试了许多样式和许多代码行，但我无法显示路径的结尾（三角形）。拜托，你能帮帮我吗？此致。

4

1 回答 1

1

您的“marker-end”属性应引用标记的 ID 或其他 CSS 选择器。就目前而言，您使用 String 的“id”定义标记，这与您在 svg:path 的“marker-end”上引用的 url() 选择器不对应。

于 2015-01-06T16:46:40.423 回答