4

私はしばらくこの問題に悩まされており、既存の回答に基づいて何をすべきかわかりません。均一な応答の最後の JSON エントリでこのエラーが発生し続けます。

...{"paperCount": 1, "PMIDs": [20626970], "authorA": 79, "authorB": 80}, 
{"paperCount": 1, "PMIDs": [20492581], "authorA": 81, "authorB": 82}, 
{"paperCount": 1, "PMIDs": [20492581], "authorA": 81, "authorB": 83}, 
{"paperCount": 1, "PMIDs": [20492581], "authorA": 81, "authorB": 84}, 
{"paperCount": 1, "PMIDs": [20492581], "authorA": 82, "authorB": 83}, 
{"paperCount": 1, "PMIDs": [20492581], "authorA": 82, "authorB": 84}, 
{"paperCount": 1, "PMIDs": [20492581], "authorA": 83, "authorB": 84}]...

その情報を抽出するためのコードは以下のとおりです。forループで失敗し続けます...

  $.getJSON('/papers.txt', function(response){
    var w = 1280,
    h = 900,
    fill = d3.scale.category10(),
    nodes = d3.range(1000).map(Object),
    links = d3.range(1000).map(Object);

    var index = 0;
    var mouseX = 0,
      mouseY = 0;

    for (var j = 0; j < response.length; j++){
      links[j] = {source: nodes[response[j].authorA], target: nodes[response[j].authorB], value: response[j].paperCount};
    }

どんな助けでも大歓迎です。

ありがとう！

4

1 に答える 1

17

序章

何よりも、この回答で私が言おうとしていることはすべてそこに書かれているので、ドキュメントをよく見ることをお勧めします

さて、最初に提供するコードでは、強制レイアウトをまったく使用せず、ノードを宣言せず、ノードをsvgに含めません...基本的に、私が見るところから、エラーをスローすることは間違いありません。この例を見て、最小限の力の有向グラフを作成する方法を確認してください。

また、次に質問があるときは、jsFiddle を作成して、それに取り組み、問題がどこにあるかを確認できるようにすることをお勧めします。従来の方法で d3.js を使用しないでください。

それでは、基本に戻りましょう。

グラフを定義する

まず、データをロードする前に、グラフの一般的なプロパティを定義する必要があります。

var width = 960,
    height = 500;

var color = d3.scale.category20();

/* Here we define that we will use the force layout an we add some parameters to setup the basic layout of the graph */
var force = d3.layout.force() 
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

/* Here we include the graph in the page */
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

ただし、今のところ、グラフにはノードがありません。データをロードする必要があります。

データをロードする

データをロードするために、d3 はヘルパーを提供しているので、jQuery のものの代わりにそれを使用しましょう。別のライブラリを混在させる必要はありません。参考までに、json ローダーには .json ファイルが必要なので、json 形式のデータが含まれている場合でも .txt ファイルを使用しないでください。

d3.json("papers.json", function(error, data) {
    // do whatever you need to do with the json data, for this example : create the graph
}

後で行うことはすべて、これらのブレース内に含める必要があります。

データをフォーマットする

ここで見たところ、データはリンクのリストにすぎないようです。ノードは 0 から 99 までのポイントにすぎないと考えます。

var my_nodes = d3.range(100).map(function(d){return {"name": d};});
var my_links = my_data.map(function(d){return {"source": d.authorA, "target": d.authorB, "value":d.paperCount, "origin": d};});

力有向グラフを作成する

データから力有向グラフを作成するには、

force // I use the previously defined variable force to add the data.
    .nodes(my_nodes)
    .links(my_links)
    .start() //start the simulation

これで、強制レイアウト シミュレーションがオンになり、データがあることがわかりますが、svg には何も追加されません。すべてを追加します。

var link = svg.selectAll(".link")
    .data(my_links)
    .enter().append("line")
    .attr("class", "link")

var node = svg.selectAll(".node")
    .data(my_nodes)
    .enter().append("circle") // If you wonder why enter() is used, see the documentation
    .attr("class", "node")
    .attr("r", 5)
    .style("fill", function(d) { return "red"; })
    .call(force.drag);

クラス属性については、例を参照してください。

tick() 関数を宣言する

最後に、強制レイアウト関数の各反復で呼び出される tick 関数を宣言する必要があります。

force.on("tick", function() {
  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });
        
  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
});

結論

データが機能することを示すために、データの基本的な例を翻訳しました: http://bl.ocks.org/ChrisJamesC/5028030

または...

おそらく、あなたが抱えていた主な問題は、 $.getJson() 関数が非同期であることを理解していなかったことです。そのため、ベクトルを構築するlinksだけでなく、この関数でのみ使用する必要があります。まだロードされていません。

または...

おそらく、あなたのエラーは、.json/papers.jsonの代わりにjson ファイルに名前を付ける必要があるという事実から来ています/papers.txt。

于 2013-02-25T05:59:30.053 に答える