D3.JS - 让我的链接可见答案

【问题标题】：D3.JS - make my links visibleD3.JS - 让我的链接可见
【发布时间】：2012-05-24 11:17:58
【问题描述】：

我想制作一个结构不同信息的图表，有点像“pearltrees”（http://www.pearltrees.com/）。目前，我显示了元素（但尚未与任何类型的数据相关联），并且它们之间有链接（每个元素都附加到之前的元素）。问题是：连接存在但不可见。提示：不是浏览器，必须是代码；）尝试了很多，在网上搜索，但现在我觉得这个问题花费了我很多时间，所以我想问你。

<!DOCTYPE html>
<html>
<head>
     <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.25.0">       
     </script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.25.0"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.25.0"></script>
 <style type="text/css">
link { stroke: #999; }
</style>
</head>
<body>
<div></div>

<script type="text/javascript">

 var w = 960,
h = 650,
nodes = [],
node,
 i = 0,
 links = [];

var vis = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);


//create force:
var force = d3.layout.force()           
.nodes(nodes)                           
.links(links)                               
.linkDistance(30)
.charge([-50])                      
.friction([0.98])   
.gravity([0.025])                       
.size([w, h]);

 //apply the force
force.on("tick", function(e) {      
    vis.selectAll("path")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });   
});

//add 15 objects that are connected each to the one before.
setInterval(function(){
if(i<15){ 
    nodes.push({
        size: Math.random() * 300 + 100,
        id: i
    });
    if(i!=0){
        links.push({source: nodes[i], target: nodes[i-1]});
    }
}

i = i+1;    

vis.selectAll("path")
  .data(nodes)
  .enter().append("svg:path")
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
  .attr("d", d3.svg.symbol()
  .size(function(d) { return d.size; })
  .type(function(d) { return d.type; }))
  .style("fill", "steelblue")
  .style("stroke", "white")
  .style("fill-opacity", "0.9")
  .style("stroke-width", "1.5px")
  .call(force.drag);


// Restart the force layout.
force
  .nodes(nodes)
  .links(links)
  .start();

drawLines(); 

//enter new nodes:
node.enter().append("svg:circle")
  .attr("class", "node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; })
  .style("fill", color)
  .on("click", click)
  .call(force.drag);

// Exit old nodes:
node.exit().remove();
}, 1000);

function drawLines(){
lines = svg.selectAll("line.link")
    .data(links);
lines.enter().insert("svg:line", "circle.node")
    .attr("class", "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; })
    .attr("drawn", 1)
    .style("stroke", "black")
    .style("stroke-width", 1)
    .style("fill", "black");
d3.selectAll("link").style("color", "black");
}

这仍然是 D3.js-examples-site 中的一组示例代码，但会在进一步的开发中更改。

感谢您的帮助。

编辑：发布更多代码，向您展示整个脚本如何工作/不工作。

【问题讨论】：

标签： graph tree d3.js

【解决方案1】：

现在你的 nodes 和 links 是空数组——所以你应该看不到任何东西。

您可以像这样添加对象 links 数组：

var link = {};
link.source = <node obj>;
link.target = <node obj>;
links.push(link);

其中 node obj 是对 nodes 数组中对象的引用。

【讨论】：

抱歉，我刚刚发布了脚本的其余部分以使工作更轻松；) 我在一个循环中创建了 15 个元素，并将它们分别连接到之前的一个。他们坚持自己的目标，但没有可见的联系。我需要改变什么才能使它们可见？

【解决方案2】：

我不确定是什么造成的，但现在它正在工作。

将节点和链接存储在一个变量中，因为 JSON 拒绝工作，现在它按预期执行链接。

force
  .nodes(jsonData.nodes)
  .links(jsonData.links)
  .start();

var link = svg.selectAll(".link")
  .data(jsonData.links)
.enter().append("line")
  .attr("class", "link");

var node = svg.selectAll(".node")
  .data(jsonData.nodes)
.enter().append("g")
  .attr("class", "node")
  .call(force.drag);

node.append("image")
  .attr("xlink:href", "../img/perry_rhodan.png")
  .attr("x", -8)
  .attr("y", -8)
  .attr("width", 30)
  .attr("height", 30);

node.append("text")
  .attr("dx", 12)
  .attr("dy", ".35em")
  .attr("fill", "#aa0000")
  .text(function(d) { return d.name });

node.append("title")
    .text(function(d) { return d.skill; });    

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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});

【讨论】：