CODEWITHSUNDEEP
javascriptd3.js
Alatsal
Alatsal

Reputation: 33

Drawing directed edges with arrow in D3

I try to show a directed graph to show a temporal evolution of a phenomenon. This is a part of my code:

        path.links.0 {
        stroke: red;
    }

    path.links.1 {
        stroke: green;
    }

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

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

and

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

My problem: I can't show the arrows... only a line. I try many styles and many lines of code but I can't show the end of path (triangle). Please, can you help me? Best regards.

Upvotes: 0

Views: 708

Answers (1)

Elijah
Elijah

Reputation: 4639

Your "marker-end" attribute should refer to the ID or other CSS selector of the marker. As it stands, you define your markers with an "id" of String, which doesn't correspond to the url() selector you're referencing on your svg:path's "marker-end".

Upvotes: 1

Related Questions