d3に曲線が表示される

Question

情報ビジュアライゼーションでプロジェクトを行い、空港から空港まで複数の線を引きたい場合。

偉大なアークを扱うように管理されていますが、同じ空港を行き来する複数のフライトがあるため、私はライン上に異なる半径を持ちたいと思います。これはd3で可能ですか？

EDIT：

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

はい、それは可能である：ここでは、現在のコードがあります。これは、d3の質問よりも「生の」svg質問のほうが多いです。 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）と、二次曲線を作成しようとしています。