Javascript 基于D3的网络图可视化
我有需要在网络图中可视化的数据。我试图使用D3，我设法得到静态图 有谁能建议我如何创建一个图形，当单击一个节点，节点a时，它将扩展到与节点a相关的其他节点 这是我当前的代码（根据D3 gallery中的示例进行编辑）：Javascript 基于D3的网络图可视化,javascript,d3.js,graph-visualization,Javascript,D3.js,Graph Visualization,我有需要在网络图中可视化的数据。我试图使用D3，我设法得到静态图 有谁能建议我如何创建一个图形，当单击一个节点，节点a时，它将扩展到与节点a相关的其他节点 这是我当前的代码（根据D3 gallery中的示例进行编辑）： .链接{ 填充：无； 行程：#666； 笔划宽度：1.5px； } .节点圆{ 填充：#ccc； 冲程：#fff； 笔划宽度：1.5px； } 正文{ 字体：10px无衬线； 指针事件：无； } // http://blog.thomsonreuters.com/index.p
.链接{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
.节点圆{
填充：#ccc；
冲程：#fff；
笔划宽度：1.5px；
}
正文{
字体：10px无衬线；
指针事件：无；
}
// http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
变量链接=[
{来源：“植物B”，目标：“圆形”}，
{来源：“图书馆”，目标：“植物C”}，
{来源：“图书馆”，目标：“植物A”}，
{来源：“植物C”，目标：“桑迪”}，
{来源：“圆形”，目标：“植物A”}，
{来源：“植物C”，目标：“长形”}，
{来源：“植物A”，目标：“圆形”}，
{来源：“植物D”，目标：“湖泊”}，
{来源：“植物D”，目标：“圆形”}，
{来源：“植物A”，目标：“图书馆”}，
{来源：“植物B”，目标：“图书馆”}，
{来源：“植物E”，目标：“湖泊”}，
{来源：“湖泊”，目标：“桑迪”}，
{来源：“植物E”，目标：“长形”}，
{来源：“图书馆”，目标：“湿土”}，
{来源：“图书馆”，目标：“植物B”}
];
var节点={}；
//从链接计算不同的节点。
links.forEach（函数（link）{
link.source=节点[link.source]| |（节点[link.source]={name:link.source}）；
link.target=节点[link.target]| |（节点[link.target]={name:link.target}）；
});
可变宽度=960，
高度=500；
var-force=d3.layout.force（）
.节点（d3.值（节点））
.链接（links）
.尺寸（[宽度、高度]）
.linkDistance（80）
。收费（-300）
.on（“滴答”，滴答）
.start（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var link=svg.selectAll（“.link”）
.data（force.links（））
.enter（）.append（“行”）
.attr（“类”、“链接”）；
var node=svg.selectAll（“.node”）
.data（force.nodes（））
.enter（）.append（“g”）
.attr（“类”、“节点”）
.on（“鼠标悬停”，鼠标悬停）
.on（“mouseout”，mouseout）
.呼叫（强制拖动）；
node.append（“圆”）
.attr（“r”，8）；
node.append（“文本”）
.attr（“x”，12）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.name；}）；
函数tick（）{
链接
.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（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
}
函数mouseover（）{
d3.选择（这个）。选择（“圆”）。过渡（）
.持续时间（750）
.attr（“r”，16）；
}
函数mouseout（）{
d3.选择（这个）。选择（“圆”）。过渡（）
.持续时间（750）
.attr（“r”，8）；
}
我的数据实际上应该来自一个查询，那么有没有办法让该节点链接到我的查询页面？检查这个@Cyril检查那个。但它不将子节点与父节点关联。我的数据有可能与其他节点有关系的节点。因此，在这种情况下，您必须将数据设计为我所指示例中所期望的数据。示例能否与var一起工作，因为我的查询结果将作为变量传递。谢谢你的帮助。我在这方面很新。是的，你可以通过ajax检查加载你的内容。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
.node circle {
fill: #ccc;
stroke: #fff;
stroke-width: 1.5px;
}
text {
font: 10px sans-serif;
pointer-events: none;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
// http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
var links = [
{source: "Plant B", target: "Round shape"},
{source: "Library", target: "Plant C"},
{source: "Library", target: "Plant A"},
{source: "Plant C", target: "Sandy"},
{source: "Round shape", target: "Plant A"},
{source: "Plant C", target: "Long shape"},
{source: "Plant A", target: "Round shape"},
{source: "Plant D", target: "Lake"},
{source: "Plant D", target: "Round shape"},
{source: "Plant A", target: "Library"},
{source: "Plant B", target: "Library"},
{source: "Plant E", target: "Lake"},
{source: "Lake", target: "Sandy"},
{source: "Plant E", target: "Long shape"},
{source: "Library", target: "Wet soil"},
{source: "Library", target: "Plant B"}
];
var nodes = {};
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});
var width = 960,
height = 500;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(80)
.charge(-300)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);
node.append("circle")
.attr("r", 8);
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
function tick() {
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 8);
}
</script>