问题描述:

I have trouble in drawing the line with arrow using d3.js. I did see some tutorials and wrote this code, but I just see the line with no arrow mark. Could anyone please look at it and tell me where am I missing. Thanks in advance.

<!DOCTYPE html>

<html>

<head>

<title>Drawing line with arrow at the end</title>

<script src="http://d3js.org/d3.v3.min.js"></script>

</head>

<body>

<script type='text/javascript'>

var w = 300;

var h = 300;

var svg = d3.select("body")

.append("svg")

.attr("width", w)

.attr("height", h);

//arrow

svg.append("svg:defs").append("svg:marker")

.attr("id", "triangle")

.attr("viewBox", "0 -5 10 10")

.attr("refX", 15)

.attr("refY", -1.5)

.attr("markerWidth", 6)

.attr("markerHeight", 6)

.attr("orient", "auto");

//line

svg.append("line")

.attr("x1", 100)

.attr("y1", 100)

.attr("x2", 200)

.attr("y2", 100)

.attr("stroke-width", 1)

.attr("stroke", "black")

.attr("marker-end", "url(#triangle)");

</script>

</body>

</html>

网友答案:

Change your marker creation to the following:

svg.append("svg:defs").append("svg:marker")
    .attr("id", "triangle")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M 0 -5 10 10")
    .style("stroke", "black");

Once you do this, you'll see a line being drawn. You may want to use fill instead of stroke if you want a filled in arrow, which you can get by using the following code:

svg.append("svg:defs").append("svg:marker")
    .attr("id", "triangle")
    .attr("refX", 6)
    .attr("refY", 6)
    .attr("markerWidth", 30)
    .attr("markerHeight", 30)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M 0 0 12 6 0 12 3 6")
    .style("fill", "black");
相关阅读:
Top