Javascript 带矩形的D3 v4力有向图

在下面的力定向图中，我希望矩形在垂直方向上彼此靠近，同时在水平方向上保持相同的距离：

var数据={
“节点”：[
{  
“名称”：“Abc”，
“id”：“1”，
“值”：“1”，
“cvr”：“123”
},
{  
“名称”：“Aaa”，
“id”：“2”，
“值”：“0.25”，
“cvr”：“7445”
},
{  
“名称”：“JTY”，
“id”：“3”，
“值”：“0.25”，
“cvr”：“24582”
},
{  
“名称”：“TTT”，
“id”：“4”，
“值”：“0.1”，
“cvr”：“12351”
},
{  
“姓名”：“嗯”，
“id”：“5”，
“值”：“0.15”，
“cvr”：“783456”
},
{  
“名称”：“KLI”，
“id”：“6”，
“值”：“0.05”
},
{  
“名称”：“OTP”，
“id”：“7”，
“值”：“0.250”
},
{  
“姓名”：“塔斯库”，
“id”：“8”，
“值”：“0.250”
},
{  
“名称”：“信息产业部”，
“id”：“9”，
“值”：“0.10”
},
{  
“名称”：“YrA”，
“id”：“11”，
“值”：“0.150”，
“cvr”：“10096669”
},
{  
“名称”：“Tarb”，
“id”：“10”，
“值”：“0.1500”
}
],
“链接”：[
{  
“来源”：“2”，
“目标”：“1”
},
{  
“来源”：“3”，
“目标”：“1”
},
{  
“来源”：“4”，
“目标”：“1”
},
{  
“来源”：“5”，
“目标”：“1”
},
{  
“来源”：“6”，
“目标”：“1”
},
{  
“来源”：“7”，
“目标”：“2”
},
{  
“来源”：“8”，
“目标”：“3”
},
{  
“来源”：“9”，
“目标”：“4”
},
{  
“来源”：“11”，
“目标”：“5”
},
{  
“来源”：“10”，
“目标”：“11”
}
]
};
//创建放置力定向图的位置
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
宽度=240；
高度=60；
var minDistance=Math.sqrt（rectWidth*rectWidth+rectHeight*rectHeight）；
//设置模拟并添加力
var simulation=d3.forceSimulation（）
.节点（数据.节点）；
var link_force=d3.forceLink（data.links）
.id（函数（d）{return d.id；}）.距离（minDistance）.强度（1）；
var charge_force=d3.forceManyBody（）
.兵力（-1000）；
变量中心力=d3力中心（宽度/2，高度/2）；
模拟
.force（“冲锋队”，冲锋队）
.力（“中心力”，中心力）
.force（“links”，link_force）；
//添加勾号说明：
模拟。on（“滴答声”，滴答声动作）；
//为缩放添加包围组
var g=svg.append（“g”）
.attr（“类”、“一切”）；
var div=g.选择（“主体”）.追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
//为链接画线
var link=g.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（数据链接）
.输入（）
.附加（“行”）
.attr（“笔划宽度”，2）
.风格（“笔划”，颜色）；
//为节点绘制矩形和文本
var节点=g.append（“g”）
.attr（“类”、“节点”）；
变量节点=节点。选择全部（“节点”）
.data（data.nodes）
.输入（）
.附加（“g”）；
节点
.on（“鼠标悬停”，功能（d）{
d3.选择（这个）。选择（“矩形”）。样式（“填充”、“红色”）；
过渡部（）
.持续时间（200）
.样式（“不透明度”，.9）；
div.html（“asdasd”）
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
})
.开启（“鼠标出”，功能（d）{
d3.选择（本）。选择（“矩形”）。样式（“填充”，矩形颜色）；
过渡部（）
.持续时间（500）
.样式（“不透明度”，0）；
});
var rect=node.append（“rect”）
.attr（“x”，-rectWidth/2）
.attr（“y”，-rect高度/2）
.attr（“宽度”，矩形宽度）
.attr（“高度”，矩形高度）
.attr（“填充”，颜色）；
var textName=node.append（“文本”）
.text（函数（d）{返回d.name；}）
.attr（“y”，-15）
.style（“文本锚定”、“中间”）；
var textCvr=node.append（“文本”）
.text（函数（d）{返回d.cvr；}）
.attr（“y”，0）
.style（“文本锚定”、“中间”）；
var textOwned=node.append（“文本”）
.text（函数（d）{return（parseFloat（d.value）*100）.toFixed（2）+“%”；}）
.attr（“y”，15）
.style（“文本锚定”、“中间”）；
node.attr（“转换”，函数（d）{
返回“translate（“+d.x+”，“+d.y+”）
});
//添加拖动功能
var drag_handler=d3.drag（）
。打开（“开始”，拖动开始）
.打开（“拖动”，拖动）
.打开（“结束”，拖动至“结束”）；
拖拽处理器（节点）；
//添加缩放功能
var zoom_handler=d3.zoom（）
.打开（“缩放”，缩放动作）；
缩放处理程序（svg）；
/**功能**/
功能颜色（d）{
如果（d.个人）{
返回“蓝色”；
}否则{
返回“粉红色”；
}
}
//用于选择线条颜色和厚度的函数
功能链接颜色（d）{
返回“黑色”；
}
//拖动函数
函数拖动_开始（d）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
//确保不能将矩形拖动到框外
函数拖动（d）{
d、 fx=d3.event.x；
d、 fy=d3.event.y；
}
函数拖动结束（d）{
如果（！d3.event.active）simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}
//缩放功能
函数zoom_actions（）{
g、 属性（“转换”，d3.event.transform）
}
函数操作（）{
//在模拟的每个记号处更新节点位置
node.attr（“转换”，函数（d）{
返回“translate（“+d.x+”，“+d.y+”）
});
//更新链接位置
链接
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
}

---

您应该这样更改模拟：

simulation
  .force("charge_force", charge_force)
  .force("center_force", center_force)
  .force("links",link_force)
  .force('y', d3.forceY(height / 2).strength(0.10));

基本上，它会增加Yaxis的重力，但不会增加Xaxis的重力

更多关于：

更新的小提琴：

它在t中