d3 - 向路径添加标记

Question

我正在尝试在 Google 地图叠加层上进行可视化，其中我用节点表示点，用边表示节点之间的链接。这些节点和边是使用 JavaScript 的 d3 库生成的。路径是根据 json 文件生成的。我现在要做的是在每条路径的末端添加一个箭头标记，以指示路径的方向。为此，我使用了 this example，并首先指示 d3 在 defs 元素中添加包括其路径的标记，并且在生成路径期间，指示 d3 使用 [=18= 来包含标记] 属性，其值使用 url 属性通过其 id 引用标记元素。下面显示了在每个路径中定义和引用标记的代码片段。

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

})

加载地图时，会加载节点和路径，但不会出现箭头。但是，包含其引用的标记结束属性位于每个路径元素中，而标记元素（包括其定义路径）位于 HTML 中。我认为 "marker-end" 属性的值 "url(#arrow)" 不起作用，尽管我不知道为什么。

有谁知道这里出了什么问题，为什么地图上没有显示标记，以及如何解决这个问题？

Answer 1

好的，所以我自己设法找到了问题的答案。我只是将 defs 元素附加到错误的位置，它应该直接附加到 svg 而我将它附加到 svg 中的一个组。

Answer 2

简单地说，您可以先在 svg 元素中创建 def，然后像这样在其中创建标记

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

并通过 marker-end 和 marker-start 属性将此标记添加到您的路径中

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

d3 - 向路径添加标记

d3 - Adding Markers to Paths

javascript

google-maps-api-3

d3.js