在d3js中创建矩形而不是气泡

用户123

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

西里尔·切里安(Cyril Cherian)

这样可以制作矩形而不是圆形。

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

这里的工作示例

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在d3js气泡图中拖动气泡

来自分类Dev

在d3js气泡图中拖动气泡

来自分类Dev

在d3js中连接两个矩形

来自分类Dev

使用外部json文件使用d3js创建气泡图

来自分类Dev

使用外部json文件使用d3js创建气泡图

来自分类Dev

使用 Javascript 数组生成气泡图 (D3js)

来自分类Dev

D3js从数组而不是文件中获取数据

来自分类Dev

遍历D3js中已创建的节点

来自分类Dev

在d3js中创建基本的条形图

来自分类Dev

d3js绘制svg矩形和线条问题

来自分类Dev

D3js强制布局与矩形文本组重叠

来自分类Dev

在d3js中移动连接的矩形

来自分类Dev

如何实现只有完全缩放d3js才能单击气泡

来自分类Dev

使用 d3js 可点击气泡图中的四重层次结构

来自分类Dev

如何在分组的条形图d3js v4中减小矩形大小

来自分类Dev

理解d3js中的函数

来自分类Dev

d3js中的过渡功能

来自分类Dev

d3js enter不是功能问题

来自分类Dev

如何在d3.js中更新气泡图?

来自分类Dev

d3js v5:使用JSON文件中的组创建SVG

来自分类Dev

使用D3js,如何从数据库中创建flare.json结构?

来自分类Dev

使用d3js中的用户输入在下拉列表上创建多个图表

来自分类Dev

使用d3js在无序列表元素中创建锚标记?

来自分类Dev

d3js使用固定节点创建强制布局

来自分类Dev

csv的D3.js气泡图

来自分类Dev

如何在d3js中创建下一级别的流程图

来自分类Dev

如何在D3js中创建分组密钥,该分组密钥是两个JSON属性的组合

来自分类Dev

在D3JS图形中添加静态/定图例

来自分类Dev

在d3js中修改地图的大小