[英]Nodes and links in D3 (React): How to connect nodes through my links?
我們正在嘗試連接我們的節點,但它不起作用。 正在顯示節點,但不顯示它們的連接(鏈接)。
這是我們的代碼:
CreateNodesAndLinks() {
let canvas = d3.select(this.refs.anchor)
let width = 800
let height = 600
let companyNodes = Object.values(this.state.data.CompanyNodes)
let links = Object.values(this.state.data.Links)
companyNodes = this.filter_array_values(companyNodes)
links = this.filter_array_values(links)
console.log(companyNodes)
console.log(links)
const simulation = d3.forceSimulation(companyNodes)
.force("link", d3.forceLink(links))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
const svg = canvas.append("svg")
.attr("viewBox", [0, 0, width, height]);
const link = svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.join("line")
.attr("stroke-width", item => Math.sqrt(item.percent_share));
const companyNode = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(companyNodes)
.join("circle")
.attr("r", 5)
.attr("fill", "black")
.call(this.drag(simulation));
companyNode.append("title")
.text(item => item.company_id);
simulation.on("tick", () => {
link
.attr("x1", d => d.from_id.x)
.attr("y1", d => d.from_id.y)
.attr("x2", d => d.to_id.x)
.attr("y2", d => d.to_id.y);
companyNode
.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
return svg.node();
}
渲染功能:
render() {
return (
<div>
<g ref="anchor" />
</div>
);
}
這就是我們的公司節點和鏈接對象的樣子: https ://ibb.co/b5bsRLg
所以連接在“from_id”和“to_id”之間
我們不知道我們做錯了什么。 也許有人可以幫忙
可能有問題
simulation.on("tick", () => {
link...
方法,但我們無法弄清楚。
我們發現了我們的錯誤,也許它可以幫助別人。
這個...
const simulation = d3.forceSimulation(companyNodes)
.force("link", d3.forceLink(links))
...必須更改為:
const simulation = d3.forceSimulation(companyNodes)
.force("link", d3.forceLink(links).id(d => d.company_id)) //company_id is the identifier for one specific company we have in companyNodes
另一件事是我們必須將每個from_id
重命名為source
並將to_id
重命名為target
因為d3
似乎只與source
和target
一起工作
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.