D3: `bubble.nodes`が正しいグラフィックデータをデータセットに適用していません

ジョン・ドーソン

D3を使用してバブルチャートを作成しようとしていますが、データが正しく処理されない理由がわかりません。処理されたデータをPHPからインポートしbubble.node、チャートの円(半径、x座標、y座標など)に関連するグラフィックデータを適用するために実行しようとしています。代わりに、現在エラーが発生しています。

Error: Invalid value for <g> attribute transform="translate(undefined,undefined)"

コードは次のとおりです(これまでのところ、エラーのためここで停止しています):

$(document).ready(function() {
    // pull data from php file
    var topFrequency = '<?php echo json_encode($frequencyJSON)?>';

    var diameter = 510;

    // create new pack layout
    var bubble = d3.layout.pack()
                   .sort(null)
                   .size([diameter, diameter]);

    // select chart3 div and append svg canvas for graph
    var canvas = d3.select(".chart3").append("svg")
                                     .attr("width", diameter)
                                     .attr("height", diameter)
                                     .append("g");

    jsonData = JSON.parse(jsonData);

    // should return array of nodes associated with data
    // computed position of nodes & graphical data for each node
    var nodes = bubble.nodes(topFrequency);

    var node = canvas.selectAll(".node")
                     .data(nodes)
                     .enter()
                     .append("g")
                     // give nodes a class name for referencing
                     .attr("class", "node")
                     .attr("transform", function (d) {
                         return "translate(" + d.x + "," + d.y + ")";
                     });
});

topFrequencyでこのように見えますconsole.log

{"name":"frequencyData",
    "children":[
        {
            "author1":"TUYTTENS, FAM",
            "frequency":7
        },
        {
            "author1":"REVILLA, E",
            "frequency":7
        },
        {
            "author1":"ROPER, TJ",
            "frequency":7
        },
        {
            "author1":"MACDONALD, DW",
            "frequency":6
        },
        {
            "author1":"WOODROFFE, R",
            "frequency":5
        },
        {
            "author1":"CHEESEMAN, CL",
            "frequency":4
        },
        {
            "author1":"GALLAGHER, J",
            "frequency":4
        },
        {
            "author1":"KOWALCZYK, R",
            "frequency":3
        },
        {
            "author1":"HANCOX, M",
            "frequency":3
        },
        {
            "author1":"VIRGOS, E",
            "frequency":3
        }
    ]
}

undefinedx属性とy属性がノードの配列に作成されていないため、上記エラーが発生していることがわかりますが、その理由はわかりません。おそらく私のデータは間違った形式ですか?

**編集**

JSON.parse(topFrequency)正しい形式でデータを取得するために追加さました。console.log(jsonData)与える:

Object {name: "frequencyData", children: Array[10]}
children: Array[10]
    0: Object
        author1: "CARTES, JE"
        depth: 1
        frequency: 10
        parent: Object
        r: NaN
        value: 0
        x: NaN
        y: NaN
    1: Object
        author1: "SASSEN, R"
        depth: 1
        frequency: 8
        parent: Object
        r: NaN
        value: 0
        x: NaN
        y: NaN
    2: Object
    3: Object
    4: Object
    5: Object
    6: Object
    7: Object
    8: Object
    9: Object
    length: 10
depth: 0
name: "frequencyData"
r: NaN
value: 0
x: NaN
y: NaN

これで正しい属性が返さNaNれますが、値が返されます。私が電話する前にもこれを行っていますbubble.nodes; これらの属性はbubble.nodesによって追加されたと思いました

マーク

データのvalue アクセサ関数がありません

var bubble = d3.layout.pack()
  .sort(null)
  .value(function(d){
    return d.frequency; //<-- frequency is your accessor
  })
  .size([diameter, diameter]);

もちろん、空のグループだけでなく、視覚的な要素(円など)も追加する必要があります。

これがです。

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

D3バブルチャート 'bubble.nodes not a function'

分類Dev

D3横棒グラフは新しいデータセットに移行しません

分類Dev

d3ツリーマップグラフィックがenter()およびexit()データを正しく認識しない

分類Dev

d3はjsonを更新しましたが、新しいデータにアクセスしません

分類Dev

d3チェックボックスを介したデータポイントのフィルタリングが正常に機能しない

分類Dev

d3.nestで作成されたデータセットが正しく描画されていません

分類Dev

データは変更されますが、リロードしても新しいデータはフェッチされません、D3

分類Dev

D3折れ線グラフにツールチップとデータポイントが正しく表示されない

分類Dev

d3:DOMを更新しないデータセットを更新する

分類Dev

d3jsで軸ティックとして文字列値を適切に使用する方法は?データを正しくマッピングできないと、このコードの何が問題になっているのか理解できません

分類Dev

D3のスタック関数を使用してデータセットをスタックするにはどうすればよいですか?

分類Dev

D3結合のオブジェクトの新しいデータ配列が正しく認識されていません

分類Dev

D3 v4グラフはバーを更新しませんが、新しい軸データを追加します

分類Dev

d3散布図を更新すると、新しいデータポイントが正しい位置にありません

分類Dev

D3円グラフのラベルデータが機能しない

分類Dev

How create legend for bubble chart in d3? Legend not showing up

分類Dev

is it possible to tweak the d3 bubble chart to obtain the bubbles at scattered positions instead of a circle pack?

分類Dev

d3 v4: ヒストグラム データでスタックを使用しますか?

分類Dev

yAxisBarが正しいデータを表示しない理由D3

分類Dev

ドラッグ時にd3でデータが正しく渡されることを確認するにはどうすればよいですか?

分類Dev

D3がJSONファイルでマップデータをレンダリングしない

分類Dev

javascript d3は、1セットのデータからデータセットを作成します

分類Dev

D3 コード ダイアグラムでツールチップを使用して値を取得する - エラー: 「ターゲットのプロパティが定義されていません」

分類Dev

D3積み上げ棒グラフのデータを更新しています

分類Dev

d3.js:新しいデータセットでグラフを更新します

分類Dev

D3スタックストリームグラフが曲がっていない

分類Dev

D3円グラフ:キャッチされていないタイプエラー-未定義のプロパティ 'pie'を読み取れません

分類Dev

CSVからJSONに再フォーマットされたデータ、D3で正しく解析できません

分類Dev

D3はデータに基づいて色を更新します

Related 関連記事

  1. 1

    D3バブルチャート 'bubble.nodes not a function'

  2. 2

    D3横棒グラフは新しいデータセットに移行しません

  3. 3

    d3ツリーマップグラフィックがenter()およびexit()データを正しく認識しない

  4. 4

    d3はjsonを更新しましたが、新しいデータにアクセスしません

  5. 5

    d3チェックボックスを介したデータポイントのフィルタリングが正常に機能しない

  6. 6

    d3.nestで作成されたデータセットが正しく描画されていません

  7. 7

    データは変更されますが、リロードしても新しいデータはフェッチされません、D3

  8. 8

    D3折れ線グラフにツールチップとデータポイントが正しく表示されない

  9. 9

    d3:DOMを更新しないデータセットを更新する

  10. 10

    d3jsで軸ティックとして文字列値を適切に使用する方法は?データを正しくマッピングできないと、このコードの何が問題になっているのか理解できません

  11. 11

    D3のスタック関数を使用してデータセットをスタックするにはどうすればよいですか?

  12. 12

    D3結合のオブジェクトの新しいデータ配列が正しく認識されていません

  13. 13

    D3 v4グラフはバーを更新しませんが、新しい軸データを追加します

  14. 14

    d3散布図を更新すると、新しいデータポイントが正しい位置にありません

  15. 15

    D3円グラフのラベルデータが機能しない

  16. 16

    How create legend for bubble chart in d3? Legend not showing up

  17. 17

    is it possible to tweak the d3 bubble chart to obtain the bubbles at scattered positions instead of a circle pack?

  18. 18

    d3 v4: ヒストグラム データでスタックを使用しますか?

  19. 19

    yAxisBarが正しいデータを表示しない理由D3

  20. 20

    ドラッグ時にd3でデータが正しく渡されることを確認するにはどうすればよいですか?

  21. 21

    D3がJSONファイルでマップデータをレンダリングしない

  22. 22

    javascript d3は、1セットのデータからデータセットを作成します

  23. 23

    D3 コード ダイアグラムでツールチップを使用して値を取得する - エラー: 「ターゲットのプロパティが定義されていません」

  24. 24

    D3積み上げ棒グラフのデータを更新しています

  25. 25

    d3.js:新しいデータセットでグラフを更新します

  26. 26

    D3スタックストリームグラフが曲がっていない

  27. 27

    D3円グラフ:キャッチされていないタイプエラー-未定義のプロパティ 'pie'を読み取れません

  28. 28

    CSVからJSONに再フォーマットされたデータ、D3で正しく解析できません

  29. 29

    D3はデータに基づいて色を更新します

ホットタグ

アーカイブ