I'm trying to make a visualization on a Google Maps overlay in which I represent points by nodes and links between nodes by edges. These nodes and edges are generated using JavaScript's d3 library. Paths are generated based on a json file. What I now want to do is adding an arrowhead marker on the end of each path in order to indicate direction of the path. To this end I've used this example, and first instructed d3 to add the marker including its path in a defs element, and, during generation of the paths, instructued d3 to include the marker by using the "marker-end" attribute with the value refering to marker element by it's id using an url attribute. A snippet of the code in which the marker is defined and refered to in each path is shwon below.

d3.json("./json/routes.json", function(route_data) {

  var defs = layerPaths.append("defs")

  /* here I generate the marker shape and assign it the "arrow" id */
  defs.append("marker")
    .attr({
      "id": "arrow",
      "viewBox": "0 -5 10 10",
      "refX": 5,
      "refY": 0,
      "markerWidth": 4,
      "markerHeight": 4,
      "orient": "auto"
    })
    .append("path")
    .attr("d", "M 0 -5 L 10 0 L 0 5")
    .attr("class", "arrowHead");

  /* here I start generating the paths */ 
  var path = layerPaths.selectAll("path")
    .data(route_data)
    .each(setPathProperties)
    .enter()
    .append("path")
    .each(setPathProperties); // path properties are set by the setPathProperties function

  function setPathProperties(d) {

    /* I removed the plex functions that calculate path position as these are irrelevant for the question*/

    /* select the current path element and add attributes*/
    d3.select(this)
      .attr("class", "path")
      .attr("d", svgPen)
      .attr("stroke", "blue")
      .attr("stroke-width", 10)

    /* add the marker to the path by refering with a url statment to the marker element with the arrow id */
    .attr("marker-end", "url(#arrow)");
  }

})

Upon loading the map, the nodes and the paths load, though the arrow heads do not appear. The marker-end attribute including its reference, however, is in every path element and the marker element, including its defining path are in the HTML. I think the value of the "marker-end" attribute, which is "url(#arrow)" does not work though I have no clue why.

Does anybody know what's going wrong here, why the markers do not show up at the map, and how to resolve this issue?

I'm trying to make a visualization on a Google Maps overlay in which I represent points by nodes and links between nodes by edges. These nodes and edges are generated using JavaScript's d3 library. Paths are generated based on a json file. What I now want to do is adding an arrowhead marker on the end of each path in order to indicate direction of the path. To this end I've used this example, and first instructed d3 to add the marker including its path in a defs element, and, during generation of the paths, instructued d3 to include the marker by using the "marker-end" attribute with the value refering to marker element by it's id using an url attribute. A snippet of the code in which the marker is defined and refered to in each path is shwon below.

d3.json("./json/routes.json", function(route_data) {

  var defs = layerPaths.append("defs")

  /* here I generate the marker shape and assign it the "arrow" id */
  defs.append("marker")
    .attr({
      "id": "arrow",
      "viewBox": "0 -5 10 10",
      "refX": 5,
      "refY": 0,
      "markerWidth": 4,
      "markerHeight": 4,
      "orient": "auto"
    })
    .append("path")
    .attr("d", "M 0 -5 L 10 0 L 0 5")
    .attr("class", "arrowHead");

  /* here I start generating the paths */ 
  var path = layerPaths.selectAll("path")
    .data(route_data)
    .each(setPathProperties)
    .enter()
    .append("path")
    .each(setPathProperties); // path properties are set by the setPathProperties function

  function setPathProperties(d) {

    /* I removed the plex functions that calculate path position as these are irrelevant for the question*/

    /* select the current path element and add attributes*/
    d3.select(this)
      .attr("class", "path")
      .attr("d", svgPen)
      .attr("stroke", "blue")
      .attr("stroke-width", 10)

    /* add the marker to the path by refering with a url statment to the marker element with the arrow id */
    .attr("marker-end", "url(#arrow)");
  }

})

Upon loading the map, the nodes and the paths load, though the arrow heads do not appear. The marker-end attribute including its reference, however, is in every path element and the marker element, including its defining path are in the HTML. I think the value of the "marker-end" attribute, which is "url(#arrow)" does not work though I have no clue why.

Does anybody know what's going wrong here, why the markers do not show up at the map, and how to resolve this issue?

• javascript
• google-maps-api-3
• d3.js

Share Improve this question Follow asked Mar 19, 2015 at 15:34 HayoHayo 7111 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

simply you can first created defs in your svg element and create your marker in this like this

  svg.append("svg:defs").append("svg:marker")
  .attr("id", "triangle")
  .attr("refX", 13)
  .attr("refY", 5)
  .attr("markerWidth", 30)
  .attr("markerHeight", 30)
  .attr("markerUnits","userSpaceOnUse")
  .attr("orient", "auto")
  .append("path")
  .attr("d", "M 0 0 12 6 0 12 3 6")
  .style("fill", "#555");

and add this markers to your path by marker-end and marker-start attribute like this

 var link = svg.append('g')
  .attr('class', 'links')
  .selectAll('path')
  .data(graph.links)
  .enter().append('path')
  .attr("marker-end", "url(#triangle)")

Okay, so I managed to find out the answer to the question myself. I simply appended the defs element in the wrong spot, it should be appended directly to the svg whereas I appended it to a group in the svg.