使用d3js创建矩形而不是气泡图形

Question

使用d3js创建矩形而不是气泡图形

d3.js

4

我使用了这个http://bl.ocks.org/mbostock/4063269来创建圆形，但我需要创建矩形而不是圆形，并且所有这些矩形需要被打包在一个更大的矩形中。请帮忙。

- user123

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cyril Cherian · Accepted Answer

这是如何制作矩形而不是圆形。

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

工作示例在这里。