json - サンキーダイアグラムの遷移

Question

新しいデータへのスムーズな移行ができるように、サンキーダイアグラムの例を簡単に変更する方法があるかどうかを知りたいです。たとえば、さまざまなデータファイル（energy1.json、energy2.json ...）があるとします。d3で最初のデータセットのサンキーダイアグラムをプロットし、待機してから、ボックスの配置を再配置して2番目のデータセットを表すにはどうすればよいでしょうか。

Answer 1

これは可能です。これは、csvファイルを使用する1つのアプローチです。ここで働くサンキー：https ：//www.betterment.com/resources/investment-strategy/portfolio-management/portfolio-diversification/

1. d3.csv呼び出しの外部でグローバル配列を定義します。

   var portfolioValues = [];
   

2. csvを解析してノード/リンク構造を作成するときは、値をグローバル配列にプッシュします。

   d3.csv("etf-geo.csv", function(error, data) {
       graph = {"nodes" : [], "links" : []};
       data.forEach(function (d, i) {
           var item = { source: d.source, target: d.target, values: [] };
           for (var j=0; j < 101; j++) {
               item.values.push(d['value'+j.toString()]);
           }
           portfolioValues.push(item);
           graph.nodes.push({ "name": d.source });
           graph.nodes.push({ "name": d.target });
           graph.links.push({
               source: portfolioValues[i].source,
               target: portfolioValues[i].target,
               value: portfolioValues[i].values[startingAllocation]
           });
       });
   
   //this handy little function returns only the distinct / unique nodes
   graph.nodes = d3.keys(
       d3.nest()
           .key(function (d) { return d.name; })
           .map(graph.nodes)
   );
   
   // it appears d3 with force layout wants a numeric source and target
   // so loop through each link replacing the text with its index from node
   graph.links.forEach(function (d, i) {
       graph.links[i].source = graph.nodes.indexOf(graph.links[i].source);
       graph.links[i].target = graph.nodes.indexOf(graph.links[i].target);
       portfolioValues[i].source = graph.links[i].source;
       portfolioValues[i].target = graph.links[i].target;
   });
   
   // now loop through each nodes to make nodes an array of objects
   // rather than an array of strings
   graph.nodes.forEach(function (d, i) {
       graph.nodes[i] = { "name": d };
   });
   
   // construct sankey
   sankey
       .nodes(graph.nodes)
       .links(graph.links)
       .layout();
   

3. 変更をリッスンし、ユーザー入力を更新関数に渡します。

   $(".sankey-slider").bind("slider:changed", function (event, data) {
   
   slideValue = data.value;
   
   updateData(parseInt(slideValue));
   
    });
   

4. 一時配列を作成し、グローバル配列から正しい値を取得します。sankey関数を呼び出して、レイアウトを再計算します。

       var newLinks = [];
   
       portfolioValues.forEach(function(p, i) {
           newLinks.push({
             source: p.source,
             target: p.target,
             value: p.values[allocation]
           });
       });
   
       graph.links = newLinks;
   
       sankey
       .nodes(graph.nodes)
       .links(graph.links)
       .size([width, height])
       .layout();
   

5. 変更する必要のある各要素を選択し、新しいデータ値を渡します。

   d3.selectAll(".link")
     .data(graph.links)
     .attr("d", path)
     .attr("id", function(d,i){
       d.id = i;
       return "link-"+i;
     })
     .style("stroke-width", function(d) { return Math.max(1, d.dy); })
     .sort(function(a, b) { return b.dy - a.dy; });
   
   d3.selectAll(".node").attr("transform", function(d) {
     return "translate(" + d.x + "," + d.y + ")"; });
   
   d3.selectAll("rect")
   .attr("height", function(d) { return d.dy; })
   .on("mouseover",highlight_node_links)
   .on("mouseout",onNodeMouseout);
   

ここで働くサンキー： https ：//www.betterment.com/resources/investment-strategy/portfolio-management/portfolio-diversification/

Answer 2

ノードの自動配置には、np最適化問題である連結グラフ内のリンク距離を最小化しようとする部分が含まれるため、あらゆる種類のオプティマイザーが最小値から別の最小値にジャンプしてレイアウトがジャンプする可能性があります。したがって、スムーズな移行が保証されることはありません。

最も近い可能な解決策は、おそらく2つの入力データセット間を線形補間し、それによって（データに応じて）一方から他方へとほぼスムーズに遷移する一連のグラフを生成することです。

お役に立てれば。