Create Rechteck anstelle von Blasen in d3js

Question

Ich habe diese http://bl.ocks.org/mbostock/4063269 verwendet, um Kreise zu erstellen, aber ich müsste Rechteck statt Kreis und alle diese Rechtecke müssen in einem größeren Rechteck gepackt werden. bitte hilfe.

Answer 1

So können Sie Rechtecke anstelle von Kreisen erstellen.

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); }); 

nun ein Rechteck zu erzeugen, die

//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"); 

Arbeitsbeispiel here