Javascript 网络图D3。不同长度 .节点{ 冲程：#fff； 笔划宽度：1.5px； } nodeDetail先生{ 冲程：#fff； 笔划宽度：1.5px； } .链接{ 行程：#999； 笔画不透明度：.6； } .文本{ 字体：12px无衬线； 指针事件：无；} .节点{ 冲程：#fff； 笔画宽度：3px； 填充：#008876； } 变量图={ “节点”：[ {“名称”：“RFID扫描仪”，“组”：1}， {“名称”：“化学品1标签ID:10001”，“组”：1}， {“名称”：“化学2标签ID:10002”，“组”：1}， {“名称”：“化学品3标签ID:10003”，“组”：1}， {“名称”：“化学4标签ID:10004”，“组”：1} ], “链接”：[ {“源”：0，“目标”：1，“值”：1}， {“源”：0，“目标”：2，“值”：1}， {“源”：0，“目标”：3，“值”：1}， {“源”：0，“目标”：4，“值”：1}， {“源”：0，“目标”：0，“值”：1} ] }; 可变宽度=1000， 高度=1000； var-force=d3.layout.force（） 。收费（-300） .linkDistance（100） .linkStrength（15） .尺寸（[宽度、高度]）； var svg=d3.选择（“正文”）.追加（“svg”） .attr（“宽度”，宽度） .attr（“高度”，高度）； var drawGraph=函数（图）{ 力 .nodes（图.nodes） .links（graph.links） .start（）； var link=svg.selectAll（“.link”） .数据（图表.链接） .enter（）.append（“行”） .attr（“类”、“链接”） .style（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）； var gnodes=svg.selectAll（'g.gnode'） .数据（图.节点） .输入（） .append（'g'） .classed（'gnode'，true）； var node=gnodes.append（“圆”） .attr（“类”、“节点”） .attr（“r”，函数（d）{返回d.name==='RFID扫描仪'？40:20；}） .call（强制拖动） .filter（函数（d）{返回d.name！=='RFID扫描器'}） .on（“鼠标悬停”，功能（d） { d3.选择（标签[0][d.index]）样式（“可见性”、“可见”） }) .开启（“鼠标出”，功能（d） { d3.选择（标签[0][d.index]）样式（“可见性”、“隐藏”） }) var labels=gnodes.append（“文本”） .text（函数（d）{返回d.name；}） .style（“可见性”，函数（d）{return d.name=='RFID Scanner'？'visible'：'hidden'；}）； force.on（“勾号”，函数（）{ attr（“x1”，函数（d）{返回d.source.x；}） .attr（“y1”，函数（d）{返回d.source.y；}） .attr（“x2”，函数（d）{返回d.target.x；}） .attr（“y2”，函数（d）{返回d.target.y；}）； attr（“变换”，函数（d）{ 返回“translate（+[d.x，d.y]+”）； }); }); }; 绘图（图形）；
我正在尝试在网络图中创建不同的长度。我浏览了API，我认为它与w.linkDistance（100）有关。我不太确定如何着手做这件事。但是我想给每个节点一个特定的长度。我试着浏览我硬编码的链接数据，但它似乎非常有限。提前谢谢你，我很想知道你是如何做到这一点的。看来你正在使用d3.js版本3 关于国家的文件： 若距离是一个函数，那个么将为每个链接（按顺序）计算该函数，并将链接及其索引传递给该链接，并将该上下文作为强制布局；然后使用函数的返回值设置每个链接的距离 因此，如果每个链接Javascript 网络图D3。不同长度 .节点{ 冲程：#fff； 笔划宽度：1.5px； } nodeDetail先生{ 冲程：#fff； 笔划宽度：1.5px； } .链接{ 行程：#999； 笔画不透明度：.6； } .文本{ 字体：12px无衬线； 指针事件：无；} .节点{ 冲程：#fff； 笔画宽度：3px； 填充：#008876； } 变量图={ “节点”：[ {“名称”：“RFID扫描仪”，“组”：1}， {“名称”：“化学品1标签ID:10001”，“组”：1}， {“名称”：“化学2标签ID:10002”，“组”：1}， {“名称”：“化学品3标签ID:10003”，“组”：1}， {“名称”：“化学4标签ID:10004”，“组”：1} ], “链接”：[ {“源”：0，“目标”：1，“值”：1}， {“源”：0，“目标”：2，“值”：1}， {“源”：0，“目标”：3，“值”：1}， {“源”：0，“目标”：4，“值”：1}， {“源”：0，“目标”：0，“值”：1} ] }; 可变宽度=1000， 高度=1000； var-force=d3.layout.force（） 。收费（-300） .linkDistance（100） .linkStrength（15） .尺寸（[宽度、高度]）； var svg=d3.选择（“正文”）.追加（“svg”） .attr（“宽度”，宽度） .attr（“高度”，高度）； var drawGraph=函数（图）{ 力 .nodes（图.nodes） .links（graph.links） .start（）； var link=svg.selectAll（“.link”） .数据（图表.链接） .enter（）.append（“行”） .attr（“类”、“链接”） .style（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）； var gnodes=svg.selectAll（'g.gnode'） .数据（图.节点） .输入（） .append（'g'） .classed（'gnode'，true）； var node=gnodes.append（“圆”） .attr（“类”、“节点”） .attr（“r”，函数（d）{返回d.name==='RFID扫描仪'？40:20；}） .call（强制拖动） .filter（函数（d）{返回d.name！=='RFID扫描器'}） .on（“鼠标悬停”，功能（d） { d3.选择（标签[0][d.index]）样式（“可见性”、“可见”） }) .开启（“鼠标出”，功能（d） { d3.选择（标签[0][d.index]）样式（“可见性”、“隐藏”） }) var labels=gnodes.append（“文本”） .text（函数（d）{返回d.name；}） .style（“可见性”，函数（d）{return d.name=='RFID Scanner'？'visible'：'hidden'；}）； force.on（“勾号”，函数（）{ attr（“x1”，函数（d）{返回d.source.x；}） .attr（“y1”，函数（d）{返回d.source.y；}） .attr（“x2”，函数（d）{返回d.target.x；}） .attr（“y2”，函数（d）{返回d.target.y；}）； attr（“变换”，函数（d）{ 返回“translate（+[d.x，d.y]+”）； }); }); }; 绘图（图形）；,javascript,html,d3.js,Javascript,Html,D3.js,我正在尝试在网络图中创建不同的长度。我浏览了API，我认为它与w.linkDistance（100）有关。我不太确定如何着手做这件事。但是我想给每个节点一个特定的长度。我试着浏览我硬编码的链接数据，但它似乎非常有限。提前谢谢你，我很想知道你是如何做到这一点的。看来你正在使用d3.js版本3 关于国家的文件： 若距离是一个函数，那个么将为每个链接（按顺序）计算该函数，并将链接及其索引传递给该链接，并将该上下文作为强制布局；然后使用函数的返回值设置每个链接的距离 因此，如果每个链接值属性包含所需的距
值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.nodeDetail {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
.text {
font: 12px sans-serif;
pointer-events: none; }
.node {
stroke:#fff;
stroke-width:3px;
fill:#008876;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var graph = {
"nodes":[
{"name":"RFID Scanner","group":1},
{"name":"Chemical 1 Tag ID: 10001 ","group":1},
{"name":"Chemical 2 Tag ID: 10002","group":1},
{"name":"Chemical 3 Tag ID: 10003","group":1},
{"name":"Chemical 4 Tag ID: 10004","group":1}
],
"links":[
{"source":0,"target":1,"value":1 },
{"source":0,"target":2,"value":1},
{"source":0,"target":3,"value":1},
{"source":0,"target":4,"value":1},
{"source":0,"target":0,"value":1}
]
};
var width = 1000,
height = 1000;
var force = d3.layout.force()
.charge(-300)
.linkDistance(100)
.linkStrength(15)
.size([width,height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var drawGraph = function(graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var gnodes = svg.selectAll('g.gnode')
.data(graph.nodes)
.enter()
.append('g')
.classed('gnode', true);
var node = gnodes.append("circle")
.attr("class", "node")
.attr("r", function(d) { return d.name === 'RFID Scanner'? 40 : 20; })
.call(force.drag)
.filter(function(d) { return d.name !== 'RFID Scanner'})
.on("mouseover", function(d)
{
d3.select(labels[0][d.index]).style("visibility","visible")
})
.on("mouseout", function(d)
{
d3.select(labels[0][d.index]).style("visibility","hidden")
})
var labels = gnodes.append("text")
.text(function(d) { return d.name; })
.style("visibility", function(d) { return d.name === 'RFID Scanner'? 'visible' : 'hidden'; });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
gnodes.attr("transform", function(d) {
return 'translate(' + [d.x, d.y] + ')';
});
});
};
drawGraph(graph);
</script>
</body>
</html>
.linkDistance(100)
.linkDistance(function(d) {return d.value})