d3.jsマウスが2つの異なるjsonファイル

Question

を使用してノードの詳細を表示する場合、私は各ノードの詳細を実装するためにd3.jsでマウスイベントを作成したいと考えています。しかし、私はこれを達成するために異なる2つのjsonファイルを使用する必要があります。

Simple d3.js tooltipの例に基づいています。

d3.json("https://quarkbackend.com/getfile/otto-gao24/places-json", function(error,cities) { 

var lineFunction = d3.svg.line() 
    .x(function(d) {return d[0];}) 
    .y(function(d) {return d[1];}) 
    .interpolate("linear"); 
    // append some cities: 
    g2.selectAll(".cities") 
     .data(d3.entries(cities)) 
     .enter() 
     .append("circle") 
     .attr("transform",function(d) { return "translate("+ projection(d.value) + ')'; }) 
     .attr("r",1.5) 
     .attr("fill","white") 
     .attr("stroke","steelblue") 

この部分は、マップ内の場所のノードを示しており、私は、ノードを構築するための最初のJSONファイルをインポート：私は次の部分で自分のコードをしました。しかし、今からそこには詳細な情報はありません。それから、各ノードにマウスオーバーイベントを追加する必要があります。次のように、次のjsonファイルをインポートしてノードの詳細を表示します。しかし私の結果では、nothingが表示されます。私は問題がインポートファイルにあると思う。

{ 
"TYO": [139.76, 35.68], 
"BKK": [100.48, 13.75], 
"BER": [13.40, 52.52], 
"NYC": [-74.00, 40.71], 
"SIN": [103.75, 1.36], 
"BSB": [-47.43, -15.67] 
} 

そして第二にJSONファイルには、私の都市のID、名前やその他のプロパティを示します。

最初のJSONファイルが示すように、マップに自分の都市を配置するためです。次のように：

id: "dfc69b95-915f-475c-8800-db6c4e15c290" 
name: "TYO" 
original_status: "ACTIVE" 
.... 

私は都市ノードにマウスを重ねると、2番目のjsonファイルの情報が表示されることを意味します。

既存のjsonファイルに他のjsonファイルをインポートする方法を教えてください。マウスイベントを使用して詳細を表示するにはどうすればよいですか？

ありがとうございます。

Answer 1

d3.jsonは、であり、非同期である。これは、mouseoverイベントの内部に入れることができないことを意味します。

代わりに、ですべてのファイル（2、3以上、重要ではありません）をロードしてから、データビズをペイントしてください。ここで

d3.json("data1.json", function(data1) { 
    d3.json("data2.json", function(data2) { 

     //code using both data files here 

    }) 
}) 

それを示すplunkerです：あなたはd3.queueまたは、単純なアプローチでは、巣d3.json機能を使用することができます。データファイルを見てください。 plunkerでは、円の上に置いて、あなたのコンソールを見て：https://plnkr.co/edit/MvIqHtCBSjI1574XyV9V?p=preview

基本的には、mouseover関数の内部で、data2.jsonファイル内の情報は、円を作成するために使用data1.jsonファイル内の情報に基づいて取得されます。

同じ方法で、コードを適宜変更してください。