d3.js - 在力定向图组上添加背景矩形

问题描述

我想在第2组中添加一个背景矩形，想法是添加一个g元素并将第2组的所有节点附加到g元素，然后使用g元素bbox绘制一个矩形。

但我不知道如何将现有节点移动到 g 元素！ （也许不可能？）。

示例代码如下：

var graph = {
  nodes:[
    {id: "A",name:'AAAA',group: 1},{id: "B",name:'BBBB',group: 2},{id: "C",name:'CCCC',{id: "D",name:'DDDD',{id: "E",name:'EEEE',{id: "F",name:'FFFF',group: 3},{id: "G",name:'GGGG',{id: "H",name:'HHHH',{id: "I",name:'IIII',group: 3}
  ],links:[
    {source: "A",target: "B",value: 1},{source: "A",target: "C",target: "D",target: "E",target: "F",target: "G",target: "H",target: "I",]
};

var width = 400
var height = 200
var svg = d3.select('body').append('svg')
.attr('width',width)
.attr('height',height)
.style('border','1px solid red')

var color = d3.scaleOrdinal(d3.schemeCategory10);

var simulation = d3.forceSimulation()
.force("link",d3.forceLink().id(function(d) { return d.id; }).distance(100))
.force("charge",d3.forceManyBody())
.force("x",d3.forceX(function(d){
  if(d.group === 2){
    return width/3
  } else if (d.group === 3){
    return 2*width/3
  } else {
    return width/2 
  }
}))
.force("y",d3.forceY(height/2))
.force("center",d3.forceCenter(width / 2,height / 2));

var g = svg.append("g")
.attr("class","nodes")
.selectAll("circle")
.data(graph.nodes)
.enter()

var w = 80
var txts = g.append('text')
.attr('class','text')
.attr('text-anchor','middle')
.attr("dominant-baseline","central")
.attr('fill','black')
.text(d => d.name)
.each((d,i,n) => {
  var bbox = d3.select(n[i]).node().getBBox()
  var margin = 4
  bbox.x -= margin
  bbox.y -= margin
  bbox.width += 2*margin
  bbox.height += 2*margin
  if (bbox.width < w) {
    bbox.width = w
  }
  d.bbox = bbox
})

var node = g
.insert('rect','text')
.attr('stroke','black')
.attr('width',d => d.bbox.width)
.attr('height',d => d.bbox.height)
.attr("fill",function(d) { return color(d.group); })
.attr('fill-opacity',0.3)
.call(d3.drag()
      .on("start",dragstarted)
      .on("drag",dragged)
      .on("end",dragended));

var link = svg.append("g")
.attr("class","links")
.attr('stroke','black')
.selectAll("line")
.data(graph.links)
.enter().append("path")
.attr("stroke-width",function(d) { return Math.sqrt(d.value); });

simulation
  .nodes(graph.nodes)
  .on("tick",ticked);

simulation.force("link")
  .links(graph.links);

function ticked() {
  link
    .attr("d",function(d) { 
    var ax = d.source.x
    var ay = d.source.y
    var bx = d.target.x
    var by = d.target.y
    if (bx < ax) {
      ax -= w/2
      bx += w/2
    }else{
      ax += w/2
      bx -= w/2
    }
    var path = ['M',ax,ay,'L',bx,by]
    return path.join(' ')
  })

  txts.attr('x',d => d.x)
    .attr('y',d => d.y)

  node
    .attr("x",function(d) { return d.x - d.bbox.width/2; })
    .attr("y",function(d) { return d.y - d.bbox.height/2; });

}

function dragstarted(event,d) {
  if (!event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(event,d) {
  d.fx = event.x;
  d.fy = event.y;
}

function dragended(event,d) {
  if (!event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）