我想使用氣泡圖表示例作爲模板來構建可視化。我有我的JSON作爲扁平層次結構,這樣就有一個名爲children
的元素,它包含我想要可視化的對象數組。d3.js包裝氣泡圖表元素
的JSON看起來像這樣:
{
"children":[
{
"acc":"Q15019",
"uid":"SEPT2_HUMAN",
"sym":"SEPT2",
"name":"Septin-2",
"alt_ids":"",
"ratio":0.5494271087884398,
"pval":0.990804718
},
...,
{
"acc":"Q16181",
"uid":"SEPT7_HUMAN",
"sym":"SEPT7",
"name":"Septin-7",
"alt_ids":"",
"ratio":1.1949912048567823,
"pval":0.511011887
}
]
}
我已經修改的示例代碼如下:
var diameter = 960,
format = d3.format(",d"),
color = d3.scale.quantile().range(colorbrewer.RdBu[9]);
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
d3.json("datagraph.json", function(datagraph) {
var node = svg.selectAll(".node")
.data(bubble.nodes(datagraph))
.enter().append("g")
.attr("class", "node")
.attr("id", function(d) { return d.acc; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
//node.append("title").text(function(d) { return d.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return 30; })
.style("fill", function(d) {
if(d.ratio == null)
return "#ffffff";
else
return color(d.ratio);
});
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.acc; });
});
所得HTML有一噸的<g>
標籤響應的每個元素,除了它們是從不翻譯到正確的位置,而是在左上角坐在彼此的頂部。通過在Firebug中進行調查,我認爲這可能是因爲pack()算法不能一次獲得一個對象,而是整個數組作爲單個元素,因此單個元素不會獲得.x和.y值。
如果我改變.nodes()
參數datagraph.children
我得到了節點在同一時間的元素一()迭代,但奇怪的是,我得到一個<g>
對象。由於我不需要拼合層次結構,因此在示例中跳過了classes(root)
函數。我想知道packageName
屬性是否在節點()中扮演任何角色?
我該如何解決這個問題?
你能展示你的json是什麼樣子嗎? – Mark 2015-02-09 14:29:23
@Mark JSON新增 – posdef 2015-02-09 14:38:10