[解決済み] d3.svg.diagonal()はどこにありますか？

質問

以下のようにcollapsible-treeのコードを実行しようとしていました。 ここで . しかし、v4ではdiagonalメソッドは適用できないようです（間違っているかもしれません）。

に対してです。

var diagonal = d3.svg.diagonal()

こんなエラーが出ます。

TypeError: 未定義のプロパティ 'diagonal' を読み取ることができません。

v4でこれに相当するものは何ですか？ d3.jsのAPIリファレンスを見ても、手がかりはありませんでした。

解決方法は？

D3バージョン4.9.0導入 リンク形状 と同じ機能を持つ。 d3.svg.diagonal D3 v3では

によると API :

リンク形状は、ソース点からターゲット点まで滑らかな3次ベジエ曲線を生成する。曲線の始点と終点での接線は、垂直、水平、放射状のいずれかになります。

3つの方法があります。

• d3.linkHorizontal()
• d3.linkVertical()
• d3.linkRadial()

つまり、リンク先のような折りたたみ可能なツリーの場合、パスを定義します。 d という属性があります。

.attr("d", d3.linkHorizontal()
    .x(function(d) { return d.y; })
    .y(function(d) { return d.x; }));

デモ :

を持つオブジェクトがあるとします。 source と target で、それぞれ x と y プロパティを使用します。

var data = {
  source: {
    x: 20,
    y: 10
  },
  target: {
    x: 280,
    y: 100
  }
};

まず、リンクジェネレータを作成します。

var link = d3.linkHorizontal()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });

そして、そのデータをリンクジェネレータに渡すだけで、パスを描画することができるのです。

.attr("d", link(data))

以下はデモです。

var svg = d3.select("svg");

var data = {
  source: {
    x: 20,
    y: 10
  },
  target: {
    x: 280,
    y: 100
  }
};

var link = d3.linkHorizontal()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });

svg.append("path")
  .attr("d", link(data))
  .style("fill", "none")
  .style("stroke", "darkslateblue")
  .style("stroke-width", "4px");

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>