Создайте прямоугольник вместо пузырьков в 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