壊れた D3js コード ダイアグラム

コリン

D3 コード図に問題があります。

https://jsfiddle.net/Nyquist212/3vc0f2e5/6/

これは、Steve Halls の優れたコード マッパー関数を使用しています。

http://www.delimited.io/blog/2013/12/8/chord-diagrams-in-d3

過去にこれで成功しましたが、データに問題があることを示すこのエラーが表示されます (?)。

エラー: 属性 d: 期待値、「…666666669 0 1,1 NaN、NaNLNaN、NaNA…」。

誰かが私が間違っている可能性があることを理解するのを手伝ってくれますか?

var data = [
  {
    "count": 1,
    "source": "6540",
    "target": "1030"
  },
  {
    "count": 1,
    "source": "6263",
    "target": "727"
  },
  {
    "count": 1,
    "source": "16760",
    "target": "3085"
  },
  {
    "count": 1,
    "source": "7518",
    "target": "2035"
  },
  {
    "count": 1,
    "source": "5512",
    "target": "1560"
  },
  {
    "count": 1,
    "source": "16239",
    "target": "3135"
  },
  {
    "count": 1,
    "source": "116528",
    "target": "4130"
  },
  {
    "count": 1,
    "source": "14060M",
    "target": "3130"
  },
  {
    "count": 1,
    "source": "6264",
    "target": "727"
  },
  {
    "count": 1,
    "source": "6265",
    "target": "727"
  },
  {
    "count": 1,
    "source": "6542",
    "target": "1036"
  },
  {
    "count": 1,
    "source": "16018",
    "target": "3035"
  },
  {
    "count": 1,
    "source": "116619LB",
    "target": "3135"
  },
  {
    "count": 1,
    "source": "116400",
    "target": "3130"
  },
  {
    "count": 1,
    "source": "5501",
    "target": "1530"
  },
  {
    "count": 1,
    "source": "6542",
    "target": "1065"
  },
  {
    "count": 1,
    "source": "1016",
    "target": "1560"
  },
  {
    "count": 1,
    "source": "6262",
    "target": "727"
  },
  {
    "count": 1,
    "source": "16520",
    "target": "4030"
  },
  {
    "count": 1,
    "source": "6517",
    "target": "1166"
  },
  {
    "count": 1,
    "source": "16528",
    "target": "4030"
  },
  {
    "count": 1,
    "source": "116518",
    "target": "4130"
  },
  {
    "count": 1,
    "source": "5514",
    "target": "1520"
  },
  {
    "count": 1,
    "source": "6827",
    "target": "2035"
  },
  {
    "count": 1,
    "source": "5508",
    "target": "1530"
  },
  {
    "count": 1,
    "source": "16515",
    "target": "4030"
  },
  {
    "count": 1,
    "source": "5510",
    "target": "1530"
  },
  {
    "count": 1,
    "source": "114234",
    "target": "2235"
  },
  {
    "count": 1,
    "source": "16238",
    "target": "3135"
  },
  {
    "count": 1,
    "source": "5517",
    "target": "1520"
  },
  {
    "count": 1,
    "source": "1675",
    "target": "1565"
  },
  {
    "count": 1,
    "source": "14000",
    "target": "3000"
  },
  {
    "count": 1,
    "source": "1804",
    "target": "1556"
  },
  {
    "count": 1,
    "source": "114200",
    "target": "2235"
  },
  {
    "count": 1,
    "source": "16713",
    "target": "3185"
  },
  {
    "count": 1,
    "source": "1675",
    "target": "1575"
  },
  {
    "count": 1,
    "source": "116589",
    "target": "4130"
  },
  {
    "count": 1,
    "source": "6917",
    "target": "2035"
  },
  {
    "count": 1,
    "source": "1678",
    "target": "1565"
  },
  {
    "count": 1,
    "source": "16250",
    "target": "3135"
  },
  {
    "count": 1,
    "source": "6916",
    "target": "2035"
  },
  {
    "count": 1,
    "source": "6538A",
    "target": "1030"
  },
  {
    "count": 1,
    "source": "6604",
    "target": "1065"
  },
  {
    "count": 1,
    "source": "16750",
    "target": "3075"
  },
  {
    "count": 1,
    "source": "16000",
    "target": "3035"
  },
  {
    "count": 1,
    "source": "16014",
    "target": "3035"
  },
  {
    "count": 1,
    "source": "16700",
    "target": "3175"
  },
  {
    "count": 1,
    "source": "16550",
    "target": "3085"
  },
  {
    "count": 1,
    "source": "1655",
    "target": "1575"
  },
  {
    "count": 1,
    "source": "116523",
    "target": "4130"
  },
  {
    "count": 1,
    "source": "116598",
    "target": "4130"
  },
  {
    "count": 1,
    "source": "6824",
    "target": "2035"
  },
  {
    "count": 1,
    "source": "6610",
    "target": "1030"
  },
  {
    "count": 1,
    "source": "6241",
    "target": "645"
  },
  {
    "count": 1,
    "source": "16518",
    "target": "4030"
  },
  {
    "count": 1,
    "source": "16523",
    "target": "4030"
  },
  {
    "count": 1,
    "source": "1803",
    "target": "1556"
  },
  {
    "count": 1,
    "source": "1673",
    "target": "1575"
  }
];

var mpr = chordMpr(data);

    mpr
    .addValuesToMap('source')
    .setFilter(function (row, a, b) {
        return(row.source == a.name && row.target == b.name);
        })
    .setAccessor(function (recs, a, b) {
        if(!recs[0]) return 0;
        return +recs[0].count ;
        });

    drawChords(mpr.getMatrix(), mpr.getMap());

function drawChords (matrix, mmap) {

        var w = 950, h = 950, r1 = h / 3, r0 = r1 - 150;

        var fill = d3.scale.category20();

        var chord = d3.layout.chord()
            .padding(.02)   // Padding between arc categories
            .sortSubgroups(d3.descending)
            .sortChords(d3.descending);

        var arc = d3.svg.arc()
            .innerRadius(r0)
            .outerRadius(r0 + 40);  // Thickness of arc category

        var svg = d3.select("#chord") // Attach to the div element
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h)
            .append("svg:g")
            .attr("id", "circle")
            .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

        svg.append("circle").attr("r", r0 + 50);

        var rdr = chordRdr(matrix, mmap);

        chord.matrix(matrix);

        var g = svg.selectAll("g.group")
            .data(chord.groups())
            .enter().append("svg:g")
            .attr("class", "group")


            g.append("svg:path")
                .style("stroke", "black")
                .style("fill", function(d) { return fill(d.index); })
                .attr("d", arc);

    var chordPaths = svg.selectAll("path.chord")
        .data(chord.chords())
      .enter().append("svg:path")
        .attr("class", "chord")
        .style("stroke", function(d) { return d3.rgb(fill(d.target.index)).darker(); })
        .style("fill", function(d) { return fill(d.target.index); })
        .attr("d", d3.svg.chord().radius(r0))
};

// blog-post - http://www.delimited.io/blog/2013/12/8/chord-diagrams-in-d3
//*******************************************************************
//  CHORD MAPPER 
//*******************************************************************
function chordMpr (data) {
  var mpr = {}, mmap = {}, n = 0,
      matrix = [], filter, accessor;

  mpr.setFilter = function (fun) {
    filter = fun;
    return this;
  },
  mpr.setAccessor = function (fun) {
    accessor = fun;
    return this;
  },
  mpr.getMatrix = function () {
    matrix = [];
    _.each(mmap, function (a) {
      if (!matrix[a.id]) matrix[a.id] = [];
      _.each(mmap, function (b) {
       var recs = _.filter(data, function (row) {
          return filter(row, a, b);
        })
        matrix[a.id][b.id] = accessor(recs, a, b);
      });
    });
    return matrix;
  },
  mpr.getMap = function () {
    return mmap;
  },
  mpr.printMatrix = function () {
    _.each(matrix, function (elem) {
      console.log(elem);
    })
  },
  mpr.addToMap = function (value, info) {
    if (!mmap[value]) {
      mmap[value] = { name: value, id: n++, data: info }
    }
  },
  mpr.addValuesToMap = function (varName, info) {
    var values = _.uniq(_.pluck(data, varName));
    _.map(values, function (v) {
      if (!mmap[v]) {
        mmap[v] = { name: v, id: n++, data: info }
      }
    });
    return this;
  }
  return mpr;
}
//*******************************************************************
//  CHORD READER
//*******************************************************************
function chordRdr (matrix, mmap) {
  return function (d) {
    var i,j,s,t,g,m = {};
    if (d.source) {
      i = d.source.index; j = d.target.index;
      s = _.where(mmap, {id: i });
      t = _.where(mmap, {id: j });
      m.sname = s[0].name;
      m.sdata = d.source.value;
      m.svalue = +d.source.value;
      m.stotal = _.reduce(matrix[i], function (k, n) { return k + n }, 0);
      m.tname = t[0].name;
      m.tdata = d.target.value;
      m.tvalue = +d.target.value;
      m.ttotal = _.reduce(matrix[j], function (k, n) { return k + n }, 0);
    } else {
      g = _.where(mmap, {id: d.index });
      m.gname = g[0].name;
      m.gdata = g[0].data;
      m.gvalue = d.value;
    }
    m.mtotal = _.reduce(matrix, function (m1, n1) { 
      return m1 + _.reduce(n1, function (m2, n2) { return m2 + n2}, 0);
    }, 0);
    return m;
  }
}
メグラハム

ソース ID とターゲット ID は相互に排他的であり (つまり、ソースはターゲットではなく、ターゲットはソースではありません)、ソースの値を追加するだけなので、レイアウト アルゴリズムがターゲットを検索すると null が返され、最終的に次のようにカスケードされます。レイアウト内の NaN。

ターゲットも追加して解決します。

.addValuesToMap('source')
.addValuesToMap('target')

コード ダイアグラムが 2 部グラフを表示するのに最適かどうかという問題がありますが、2 つのグループを一緒に保持しているように見えます (おそらく、それらが別々に追加されたため)。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

d3jsを使用したワードクラウド

分類Dev

手動で描画した円でD3jsズーム

分類Dev

タイムスケールにわたるD3JSスタック棒グラフ

分類Dev

ネストされたグループ画像を変換するd3js

分類Dev

ネストされたグループを移動するD3js

分類Dev

JS + JS =壊れたコード?

分類Dev

d3jsでグラフをそれぞれの長方形ノードサイズに揃える方法

分類Dev

D3JSの特定のデータポイントに対してランダムに選択されたポリゴンを追加します

分類Dev

ノードとリンクを使用したD3jsドラッグ動作

分類Dev

d3jsグループ化された棒グラフの切り替え凡例

分類Dev

d3jsリンクアークで満たされた役に立たない部分

分類Dev

g ++最適化:O2フラグは、O3が再びコードを壊す壊れたコードを修正します

分類Dev

折りたたみ可能なサンキーダイアグラム-D3

分類Dev

d3.jsサンキーダイアグラム:「。dy」と.dx」はどこに設定されますか?

分類Dev

d3jsチャートのドットとエリアが更新されない

分類Dev

swift 3にアップグレードした後、UITableViewが壊れました

分類Dev

d3jsでオーバーラップ折れ線グラフを取り除く方法

分類Dev

d3JSチャートが正しくレンダリングされない

分類Dev

光沢のあるブートストラップ3にアップグレードすると、HTMLコードが壊れました

分類Dev

D3js円グラフがローカルホストに表示されない

分類Dev

D3jsを使用して折れ線グラフでツールチップを使用する方法

分類Dev

D3js:タッチで動作するドラッグスライダー

分類Dev

.d3jsの子ノードのスタイル

分類Dev

D3jsでデータを再度バインドする

分類Dev

scaleTimeを使用したD3JS棒グラフ

分類Dev

D3JS折れ線グラフ反転問題

分類Dev

d3jsグラフに線が表示されない

分類Dev

D3js折れ線グラフの構成

分類Dev

D3js ForceLayoutバリアとフォールイン

Related 関連記事

  1. 1

    d3jsを使用したワードクラウド

  2. 2

    手動で描画した円でD3jsズーム

  3. 3

    タイムスケールにわたるD3JSスタック棒グラフ

  4. 4

    ネストされたグループ画像を変換するd3js

  5. 5

    ネストされたグループを移動するD3js

  6. 6

    JS + JS =壊れたコード?

  7. 7

    d3jsでグラフをそれぞれの長方形ノードサイズに揃える方法

  8. 8

    D3JSの特定のデータポイントに対してランダムに選択されたポリゴンを追加します

  9. 9

    ノードとリンクを使用したD3jsドラッグ動作

  10. 10

    d3jsグループ化された棒グラフの切り替え凡例

  11. 11

    d3jsリンクアークで満たされた役に立たない部分

  12. 12

    g ++最適化:O2フラグは、O3が再びコードを壊す壊れたコードを修正します

  13. 13

    折りたたみ可能なサンキーダイアグラム-D3

  14. 14

    d3.jsサンキーダイアグラム:「。dy」と.dx」はどこに設定されますか?

  15. 15

    d3jsチャートのドットとエリアが更新されない

  16. 16

    swift 3にアップグレードした後、UITableViewが壊れました

  17. 17

    d3jsでオーバーラップ折れ線グラフを取り除く方法

  18. 18

    d3JSチャートが正しくレンダリングされない

  19. 19

    光沢のあるブートストラップ3にアップグレードすると、HTMLコードが壊れました

  20. 20

    D3js円グラフがローカルホストに表示されない

  21. 21

    D3jsを使用して折れ線グラフでツールチップを使用する方法

  22. 22

    D3js:タッチで動作するドラッグスライダー

  23. 23

    .d3jsの子ノードのスタイル

  24. 24

    D3jsでデータを再度バインドする

  25. 25

    scaleTimeを使用したD3JS棒グラフ

  26. 26

    D3JS折れ線グラフ反転問題

  27. 27

    d3jsグラフに線が表示されない

  28. 28

    D3js折れ線グラフの構成

  29. 29

    D3js ForceLayoutバリアとフォールイン

ホットタグ

アーカイブ