Question

在信息可视化中进行项目，并希望从机场到机场绘制多条线。

管理让它使用大弧度，但由于有多个往返同一机场的航班，我想在线路上有不同的半径。这可能在d3吗？

编辑：这是当前的代码：

this.formatedflightdata = {type: "FeatureCollection", features: formatFlightData(this.flightdata)};

console.log(this.formatedflightdata);

var line = this.g.selectAll(".arc") 
 .data(this.formatedflightdata.features);

  line.enter().append("path")
    .attr("class", "arc")
    .attr("fill", "none")
    .attr("stroke", "red")
    .attr("stroke-width", "2px")
    .attr("stroke-linecap", "round")
    .attr("opacity", "1")
    .attr("d", this.path)
    .on("click",  function(d) {
      console.log("Clicked line!")
    });

function formatFlightData(array) {
    var data = [];
    array.map(function (d, i) {
      var feature = {
        "type":       "Feature",
        "geometry":   {
          "type":        "LineString",
          "coordinates": [
            [d.origlong, d.origlat],
            [d.destlong, d.destlat]]
        },
        "properties": {
          "origin": d.ORIGIN,
          "destination": d.DEST,
          "dayOfMonth": d.DAY_OF_MONTH,
          "flightDate": d.FL_DATE,
          "carrier": d.CARRIER,
          "distance": d.DISTANCE
        }
      };
      data.push(feature);
    });
    return data;
  }

Current result

Answer 1

是的，有可能。这更像是一个“原始”的svg问题，而不是一个d3问题。 d3正在创建一个svg path元素。有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths。

基本上，您可以构建path以获得您喜欢的任何类型的曲线。具体到你的例子，你可以吗？想要向表示控制点的数组插入其他元素。然后，在.attr("d",部分中，使用适当的曲线构造字符串。

未经测试的例子：

attr("d", this.path[0] + ""Q 12 17 " + this.path[1])

“Q 12 17”试图制作二次曲线，其中（12,17）为任意选择的控制点。

d3中的曲线

1 个答案: