Question

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

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

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

Answer 1

你的＆＃34;标记结束＆＃34;属性应该引用标记的ID或其他CSS选择器。就目前而言，您可以使用＆＃34; id＆＃34;来定义标记。字符串，它与你在svg：path＆＃34; marker-end＆＃34;上引用的url（）选择器不对应。

在D3中用箭头绘制有向边

1 个答案: