web-dev-qa-db-ja.com

d3.svg.diagonal（）はどこにありますか？

here のように、collapsible-treeのコードを実行しようとしていました。しかし、v4では対角法は適用できないようです（間違っているかもしれません）。

ために：

var diagonal = d3.svg.diagonal()

私はこのエラーを受け取ります：

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

V4で同等のものは何ですか？ d3.js APIリファレンスを見ると、手がかりが得られませんでした。

javascriptd3.jssvg
29
Mopparthy Ravindranath

更新： 受け入れられた回答 は、D3 v4.9がリリースされてから古くなっています。

D3バージョン4.9.0で導入された リンク形状 は、古いd3.svg.diagonal D3 v3。

[〜＃〜] api [〜＃〜] によると：

リンク形状は、ソースポイントからターゲットポイントへの滑らかな3次ベジエ曲線を生成します。曲線の開始点と終了点の接線は、垂直、水平、または放射状です。

3つの方法があります。

したがって、リンクしたような折りたたみ可能なツリーの場合、path 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>
33
Gerardo Furtado

GitHubの問題 here を参照してください。

この問題は未解決ですが、ボストック氏はバージョン4でそれを再実装するラッシュに陥っていないようです。自分で実装するのは簡単だからです：

function link(d) {
  return "M" + d.source.y + "," + d.source.x
      + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
      + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
      + " " + d.target.y + "," + d.target.x;
}
19
Mark

私はこれに本当に苦労し、数時間後、それが本当に簡単であることに気づきました（他の誰もが言及しているように）。交換：

var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x]; });

...これとともに：

var diagonal = function link(d) {
  return "M" + d.source.y + "," + d.source.x
      + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
      + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
      + " " + d.target.y + "," + d.target.x;
};

それが唯一の変更であるべきです。これが誰にも役立つことを願っています。これは Patrick BrockmanのCollapsible/Searchable Tree のような視覚化で動作するはずです。

0
Pete Adam Bialecki