在d3js中創建矩形而不是氣泡

Question

我用這個http://bl.ocks.org/mbostock/4063269來創建圓，但我需要創建矩形而不是圓，所有這些矩形需要打包在一個更大的矩形內。請幫忙。

Answer 1

這是如何製作矩形而不是圓形。

node.append("rect") 
     .attr("width", function(d) { return d.r*2; })//width is the diameter 
     .attr("x", function(d) { return d.r*-1; }) 
     .attr("y", function(d) { return d.r*-1; }) 
     .attr("height", function(d) { return d.r*2; })//height is the diameter 
     .style("fill", function(d) { return color(d.packageName); }); 

我們創造出包個個

//get all the data 
    var data = d3.selectAll("g")[0].map(function(d) { 
    return d3.select(d).data()[0] 
    }) 
    //get the min x max x min y max y 
    var xmin = d3.min(data, function(d){return d.x-d.r}) 
    var xmax = d3.max(data, function(d){return d.x+d.r}) 
    var ymin = d3.min(data, function(d){return d.y-d.r}) 
    var ymax = d3.max(data, function(d){return d.y+d.r}) 

    //make a rectangle to make it over other rectangles. 
    svg.insert("rect" ,":first-child") 
    .attr("x", xmin) 
    .attr("y", ymin) 
    .attr("height", ymax-ymin) 
    .attr("width", xmax-xmin) 
    .style("opacity", 0.3) 
    .style("fill","blue"); 

的工作示例here