为什么我的d3力导向图不显示边缘？ [英] Why does my d3 force-directed graph not display edges?
本文介绍了为什么我的d3力导向图不显示边缘？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用d3创建了一个简单的强制导向图： http://goo.gl/afHTD p>
为什么图形的边缘不显示？这是我的整个HTML文件。你也可以看到它，并通过去查看我的链接页面上的源代码。它是基于d3网站的示例。
<！DOCTYPE html>
< html>
< head>
< title> Force-Directed Layout< / title>
< script type =text / javascriptsrc =d3.v2.js>< / script>
< style type =text / css>
div.node {
border-radius：6px;
width：12px;
height：12px;
margin：-6px 0 0 -6px;
position：absolute;
}
div.link {
position：absolute;
border-bottom：solid＃999 1px;
height：0;
-webkit-transform-origin：0 0;
-moz-transform-origin：0 0;
-ms-transform-origin：0 0;
-o-transform-origin：0 0;
transform-origin：0 0;
}
< / style>
< / head>
< body>
< div id =chart>< / div>
< script type =text / javascript>
var width = 960，
height = 500;
var color = d3.scale.category20（）;
var force = d3.layout.force（）
.charge（-120）
.linkDistance（30）
.size（[width，height]） ;
var svg = d3.select（＃chart）。append（svg）
.attr（width，width）
.attr ，height）;
d3.json（newJson.json，function（json）{
force
.nodes（json.nodes）
.links（json.links）
.start（）;
var link = svg.selectAll（line.link）
.data（json.links）
.enter append（line）
.attr（class，link）
.style（stroke-width，function（d）{return Math.sqrt（d.value）;} ）;
var node = svg.selectAll（circle.node）
.data（json.nodes）
.enter b $ b .attr（class，node）
.attr（r，5）
.style（fill，function（d）{return color（d.group） ;}）
.call（force.drag）;
node.append（title）
.text（function（d）{return d.name;}） ;
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; }）;
node.attr（cx，function（d）{return d.x;}）
.attr（cy，function（d）{return d.y;}）;
}）;
}）;
< / script>
< / body>
< / html>
不应 var link ... 显示边缘？我的JSON文件也很简单：
{nodes：
[{name：Myriel ，group：1}，
{name：Napoleon，group：1}，
{name：Napoleon，group：2} b $ blinks：
[{source：1，target：0，value：1}，
{source：1，target：0， value：1}，
{source：1，target：2，value：1}]}
解决方案
您需要通过CSS应用笔触样式。您当前的节点和链接样式仅限于HTML DIV元素，而节点和链接实际上分别表示为SVG圆形和线形元素。请尝试以下方法：
.node {
fill：＃000;
stroke：#fff;
stroke-width：1.5px;
}
.link {
stroke：#aaa;
stroke-width：1.5px;
}
I created a simple force-directed graph using d3: http://goo.gl/afHTD
Why are the edges of the graph not showing? Here is my entire HTML file. You could also see it and tinker with it by going to view source on my linked page of course. It is based on the example from the d3 website.
<!DOCTYPE html>
<html>
<head>
<title>Force-Directed Layout</title>
<script type="text/javascript" src="d3.v2.js"></script>
<style type="text/css">
div.node {
border-radius: 6px;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
position: absolute;
}
div.link {
position: absolute;
border-bottom: solid #999 1px;
height: 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("newJson.json", function(json) {
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll("line.link")
.data(json.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll("circle.node")
.data(json.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
node.append("title")
.text(function(d) { return d.name; });
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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
</body>
</html>
Shouldn't var link... display the edges? My JSON file is also pretty simple:
{"nodes":
[{"name":"Myriel","group":1},
{"name":"Napoleon","group":1},
{"name":"Napoleon","group":2}],
"links":
[{"source":1,"target":0,"value":1},
{"source":1,"target":0,"value":1},
{"source":1, "target":2, "value":1}]}
解决方案
You need to apply a stroke style via CSS. Your current node and link styles are restricted to HTML DIV elements, while the nodes and links are actually represented as SVG circle and line elements, respectively. Try this:
.node {
fill: #000;
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #aaa;
stroke-width: 1.5px;
}
这篇关于为什么我的d3力导向图不显示边缘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
