Question

我已经查看了堆栈溢出，看看我能找到问题的答案，但我找不到正确的答案。因此，我有这个地图上有行和节点，可以在这里找到：http://jsfiddle.net/GarrettUK/ppkf3vqb/。

问题

我的问题是如何将标记结束放在我的线上。我知道如何执行此操作，如此示例所示：http://bl.ocks.org/mbostock/1153292。但是，我无法复制该示例，因为我以不同的方式生成我的行，如下例所示，这就是我努力创建标记结束属性的原因。

我如何生成线条并设置样式：

var arcs = [
  //red lines
  {
    origin: {
      latitude: 48.632909,
      longitude: 35.024414
    },
    destination: {
      latitude: 51.727028,
      longitude: -0.395508
    },
  },
  {
    origin: {
      latitude: 37.244200,
      longitude: -115.815167
    },
    destination: {
      latitude: 51.727028,
      longitude: -0.395508
    },
  },
  {
    origin: {
      latitude: 62.955223,
      longitude: 109.555664
    },
    destination: {
      latitude: 51.727028,
      longitude: -0.395508
    },
  },
  {
    origin: {
      latitude: 48.632909,
      longitude: 35.024414
    },
    destination: {
      latitude: 62.955223,
      longitude: 109.555664
    },
  },
  {
    origin: {
      latitude: 37.244200,
      longitude: -115.815167
    },
    destination: {
      latitude: -3.513421,
      longitude: 24.082031
    },
  },
  {
    origin: {
      latitude: -12.554564,
      longitude: -43.769531
    },
    destination: {
      latitude: 62.955223,
      longitude: 109.555664
    },
  },
  {
    origin: {
      latitude: 52.696361,
      longitude: -93.339844
    },
    destination: {
      latitude: 62.955223,
      longitude: 109.555664
    },
  },
  {
    origin: {
      latitude: 7.710992,
      longitude: -5.097656
    },
    destination: {
      latitude: 62.955223,
      longitude: 109.555664
    },
  },
  {
    origin: {
      latitude: 71.187754,
      longitude: -36.035156
    },
    destination: {
      latitude: -25.799891,
      longitude: 142.207031
    },
  },
  {
    origin: {
      latitude: 22.268764,
      longitude: 78.574219
    },
    destination: {
      latitude: -25.799891,
      longitude: 142.207031
    },
  },
  {
    origin: {
      latitude: 65.072130,
      longitude: 14.238281
    },
    destination: {
      latitude: 52.696361,
      longitude: -93.339844
    },
  },
];
map.arc(arcs,  {strokeWidth: 1, arcSharpness: 1.4});

如有任何问题，请随时提出！

Answer 1

显然，datamaps.js没有提供配置路径标记的选项。您可能最好使用普通的d3.js并执行datamaps.js的操作，但添加箭头（example）：

查看source中的handleArcs功能：

  arcs
      .enter()
        .append('svg:path')
        .attr('class', 'datamaps-arc')
        .style('stroke-linecap', 'round')
        .style('stroke', function(datum) {
          return val(datum.strokeColor, options.strokeColor, datum);
        })
        .style('fill', 'none')
        .style('stroke-width', function(datum) {
            return val(datum.strokeWidth, options.strokeWidth, datum);
        })
        .attr('d', function(datum) {
            var originXY = self.latLngToXY(val(datum.origin.latitude, datum), val(datum.origin.longitude, datum))
            var destXY = self.latLngToXY(val(datum.destination.latitude, datum), val(datum.destination.longitude, datum));
            var midXY = [ (originXY[0] + destXY[0]) / 2, (originXY[1] + destXY[1]) / 2];
            if (options.greatArc) {
                  // TODO: Move this to inside `if` clause when setting attr `d`
              var greatArc = d3.geo.greatArc()
                  .source(function(d) { return [val(d.origin.longitude, d), val(d.origin.latitude, d)]; })
                  .target(function(d) { return [val(d.destination.longitude, d), val(d.destination.latitude, d)]; });

              return path(greatArc(datum))
            }
            var sharpness = val(datum.arcSharpness, options.arcSharpness, datum);
            return "M" + originXY[0] + ',' + originXY[1] + "S" + (midXY[0] + (50 * sharpness)) + "," + (midXY[1] - (75 * sharpness)) + "," + destXY[0] + "," + destXY[1];
        })
        .transition()
          .delay(100)
          .style('fill', function(datum) {
            /*
              Thank you Jake Archibald, this is awesome.
              Source: http://jakearchibald.com/2013/animated-line-drawing-svg/
            */
            var length = this.getTotalLength();
            this.style.transition = this.style.WebkitTransition = 'none';
            this.style.strokeDasharray = length + ' ' + length;
            this.style.strokeDashoffset = length;
            this.getBoundingClientRect();
            this.style.transition = this.style.WebkitTransition = 'stroke-dashoffset ' + val(datum.animationSpeed, options.animationSpeed, datum) + 'ms ease-out';
            this.style.strokeDashoffset = '0';
            return 'none';
          })

    arcs.exit()
      .transition()
      .style('opacity', 0)
      .remove();

如何在D3地理地图上添加线箭头（标记）？

1 个答案: