D3js樹圖NaN x值

Question

我正嘗試用Javascript對象創建一個小樹圖。我使用D3並試圖說明元素（鍵，ids）的嵌套結構，而不是它們的值。

我JSFiddle

var d1 = { 
     "time_completed": 1420199657, 
     "xid": "-dqAeAEjGxCDcjqrxHsraER3yWqew4xS", 
     "title": "for 8h 46m", 
     "time_created": 1420167382, 
     "time_updated": 1420200033, 
     "details": { 
     "body": 0, 
     "sound": 12598, 
     "tz": "America/Chicago", 
     "awakenings": 0, 
     "light": 18970, 
     "mind": 0, 
     "asleep_time": 1420168079, 
     "awake_time": 1420199400, 
     "awake": 707, 
     "rem": 0, 
     "duration": 32275, 
     "smart_alarm_fire": 1420199640, 
     "quality": 100, 
     "sunset": 0, 
     "sunrise": 0 
     }, 
     "date": 20150102, 
     "shared": true, 
     "snapshot_image": "/nudge/image/e/1420200033/-dqAeAEjGxCDcjqrxHsraER3yWqew4xS/MSh0lOvjHDY.png", 
     "sub_type": 0 
    }; 

var tree = d3.layout.tree() 
    .size([360, diameter/2 - 120]) 
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2)/a.depth; }); 

var diagonal = d3.svg.diagonal.radial() 
    .projection(function(d) { return [d.y, d.x/180 * Math.PI]; }); 

var svg = d3.select("#sleep-schema").append("svg") 
    .attr("width", diameter) 
    .attr("height", diameter - 150) 
    .append("g") 
    .attr("transform", "translate(" + diameter/2 + "," + diameter/2 + ")"); 

var nodes = tree.nodes(d1), 
    links = tree.links(nodes); 

var link = svg.selectAll(".link") 
    .data(links) 
    .enter().append("path") 
    .attr("class", "link") 
    .attr("d", diagonal); 

var node = svg.selectAll(".node") 
    .data(nodes) 
    .enter().append("g") 
    .attr("class", "node") 
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) 

    node.append("circle") 
    .attr("r", 4.5); 

    node.append("text") 
    .attr("dy", ".31em") 
    .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) 
    .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; }) 
    .text(function(d) { return d.xid; }); 

} 

出於某種原因，呼籲d3.layout.tree是給我上我的X NaN值座標

Error: Invalid value for <g> attribute transform="rotate(NaN)translate(0)" 

誰能告訴我，如果我的問題是形狀我的數據或我的使用d3.layout.tree()？我已經將數據對象從數組轉換爲JS對象，但d3.layout.tree（）似乎無法遍歷嵌套的JSON對象並計算x，y值。我傾向於同意你的觀點，即我的數據有問題。我一直在努力遵循this example。

Answer 1

您的JSON數據是一個數組。 樹佈局需要一個對象而不是數組。

您的數據：

d1 = [{ 
    "time_completed": 1420199657, 
    "xid": "-dqAeAEjGxCDcjqrxHsraER3yWqew4xS", 
    "title": "for 8h 46m", 
    "time_created": 1420167382, 
    "time_updated": 1420200033, 
    "details": { ... 
    "sunset": 0, 
    "sunrise": 0 
    }, 
    "date": 20150102, 
    "shared": true, 
    "snapshot_image": "/nudge/image/e/1420200033/-dqAeAEjGxCDcjqrxHsraER3yWqew4xS/MSh0lOvjHDY.png", 
    "sub_type": 0 
}]; 

它應該是：

d1 = { 
    "time_completed": 1420199657, 
    "xid": "-dqAeAEjGxCDcjqrxHsraER3yWqew4xS", 
    "title": "for 8h 46m", 
    "time_created": 1420167382, 
    "time_updated": 1420200033, 
    "details": { 
    "body": 0, 
    "sound": 12598, ... 
    }, 
    "date": 20150102, 
    "shared": true, 
    "snapshot_image": "/nudge/image/e/1420200033/-dqAeAEjGxCDcjqrxHsraER3yWqew4xS/MSh0lOvjHDY.png", 
    "sub_type": 0 
}; 

請參考的數據結構應該如何這個簡單的例子。 http://bl.ocks.org/d3noob/8375092

工作代碼here 希望這有助於！