Javascript 如何在d3.js中链接两个不同的形状

首先感谢大家。 现在我有一个案例，我想用d3展示不同服务的情况

草案的效力与pic相同

我找到了一个例子 但它只会造成圆形和混乱的布局

---

有没有人给我一个关于如何使用d3实现此页面的指导。

下面的代码片段是开发一个d3 force布局图，其中的节点具有不同的形状和连接它们的链接。 如果需要将节点放置在静态位置，请参阅

var图={
“节点”：[{
“名称”：“1”，
“评级”：90，
“id”：2951，
类型：“rect”
}, {
“名称”：“2”，
“评级”：80，
“id”：654654，
类型：“圆圈”
}, {
“名称”：“3”，
“评级”：80，
“id”：6546544，
类型：“rect”
}, {
“名称”：“4”，
“评级”：1，
“id”：68987978，
类型：“圆圈”
}, {
“名称”：“5”，
“评级”：1，
“id”：9878933，
类型：“rect”
}, {
“名称”：“6”，
“评级”：1，
“id”：6161，
类型：“圆圈”
}],
“链接”：[{
“来源”：0，
"目标":一,，
“价值”：2，
“标签”：“发布者”
}, {
“来源”：1，
"目标":二,，
“价值”：6，
“标签”：“发布者”
}, {
“来源”：3，
“目标”：4，
“价值”：4，
“标签”：“containsKeyword”
}, {
“来源”：4，
“目标”：5，
“价值”：3，
“标签”：“containsKeyword”
}]
}
var保证金={
前-5名，
右：-5，
底部：-5，
左：-5
};
变量宽度=500-margin.left-margin.right，
高度=400-margin.top-margin.bottom；
var color=d3.scale.category20（）；
var-force=d3.layout.force（）
。收费（-200）
.linkDistance（50）
.尺寸（[宽度+边距.左侧+边距.右侧，高度+边距.顶部+边距.底部]）；
var zoom=d3.behavior.zoom（）
.scaleExtent（[0.1,10]）
。打开（“缩放”，缩放）；
var drag=d3.behavior.drag（）
.来源（功能（d）{
返回d；
})
.on（“dragstart”，dragstart）
.打开（“拖动”，拖动）
.on（“dragend”，dragend）；
var svg=d3.选择（“映射”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“变换”、“平移”（“+margin.left+”，“+margin.right+”）
.呼叫（缩放）；
var rect=svg.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.style（“填充”、“无”）
.style（“指针事件”、“全部”）；
var container=svg.append（“g”）；
//d3.json（'http://blt909.free.fr/wd/map2.json，函数（错误，图形）{
力
.nodes（图.nodes）
.links（graph.links）
.linkDistance（100）
.start（）；
var link=container.append（“g”）
.attr（“类”、“链接”）
.selectAll（“.link”）
.数据（图表.链接）
.enter（）.append（“行”）
.attr（“类”、“链接”）
.样式（“笔划宽度”，功能（d）{
返回Math.sqrt（d.value）；
});
var节点=container.append（“g”）
.attr（“类”、“节点”）
.selectAll（“.node”）
.数据（图.节点）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.呼叫（拖动）；
节点。每个（功能（d）{
如果（d.type==“圆圈”）{
d3.选择（本）。追加（“圆圈”）
.attr（“r”，20）
.样式（“填充”和“#4EACFB”）；
}否则{
d3.选择（this）.append（“rect”）
.attr（“高度”，32）
.attr（“宽度”，90）
.attr（“x”，-（90/2））
.样式（“填充”和“#56D075”）；
}
});
force.on（“勾号”，函数（）{
link.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
返回d.target.x；
})
.attr（“y2”，功能（d）{
返回d.target.y；
});
node.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
});
});
函数点类型（d）{
d、 x=+d.x；
d、 y=+d.y；
返回d；
}
函数缩放（）{
container.attr（“transform”、“translate”（+d3.event.translate+））比例（+d3.event.scale+）；
}
函数dragstarted（d）{
d3.event.sourceEvent.stopPropagation（）；
force.start（）；
}
函数（d）{
d、 x=d3.event.x；
d、 y=d3.event.y；
}
函数d（d）{
d3.选择（this）.classed（“拖动”，false）；
}

.node{
冲程：#fff；
笔划宽度：1.5px；
}
.节点处于活动状态{
行程：555；
笔划宽度：1.5px；
}
.链接{
行程：555；
笔划不透明度：.3；
}
.链接处于活动状态{
笔画不透明度：1；
}
.覆盖{
填充：无；
指针事件：全部；
}
#地图{
边框：2px#555虚线；
宽度：500px；
高度：400px；
}

你需要在这里提供一些实际的代码。否则，这不是一个真正合适的问题。你太棒了，非常感谢。顺便说一句，我看到你使用了缩放方法，如何缩小它？