d3.js包裝氣泡圖表元素

我想使用氣泡圖表示例作爲模板來構建可視化。我有我的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值。

enter image description here

如果我改變.nodes()參數datagraph.children我得到了節點在同一時間的元素一（）迭代，但奇怪的是，我得到一個<g>對象。由於我不需要拼合層次結構，因此在示例中跳過了classes(root)函數。我想知道packageName屬性是否在節點（）中扮演任何角色？

我該如何解決這個問題？

來源

2015-02-09 posdef

你能展示你的json是什麼樣子嗎？ – Mark 2015-02-09 14:29:23

@Mark JSON新增 – posdef 2015-02-09 14:38:10

您還沒有指定一個value accessor：

var bubble = d3.layout.pack() 
    .sort(null) 
    .size([diameter, diameter]) 
    .padding(1.5) 
    .value(function(d) { return d.pval; }) //<- must return a number

例here。

來源

2015-02-09 15:19:03 Mark

示例代碼中沒有一個？ http://bl.ocks.org/mbostock/4063269 – posdef 2015-02-09 15:26:06

@posdef，默認是查找你沒有的'value'屬性。您鏈接的代碼在'classes'函數中添加了'value'屬性。 – Mark 2015-02-09 15:28:06

d3.js包裝氣泡圖表元素

回答

相關問題