Question

我想制作一个构建不同信息的图表，有点像“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中的一组示例代码，但在进一步开发中会有所改变。

感谢您的帮助。

编辑：发布更多代码，向您展示整个脚本的工作原理/不起作用。

Answer 1

现在您的节点和链接是空数组 - 因此您不应该看到任何内容。

您可以像这样添加链接数组：

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

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

Answer 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 + ")"; });
});

D3.JS - 让我的链接可见

2 个答案: