D3.JS - 让我的链接可见

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

<!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-例子现场示例代码，但是这将在进一步研究与开发被改变。

感谢您的帮助。

编辑：张贴了更多的代码，告诉你整个脚本是如何工作/不工作的。

来源

2012-05-24 David

我不完全确定它是什么，但现在它工作。

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

来源

2012-09-07 07:32:42 David

现在你的节点和链接是空数组 - 所以你不应该看到任何东西。

可以添加链接阵列这样的对象：

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

其中节点obj是在节点阵列的对象的引用。

来源

2012-05-24 19:47:40 trevorism

对不起，我刚刚发布了脚本的其余部分，使工作更轻松;）我创造一个环圈15个元素，并将它们各自前连接到一个。他们坚持他们的目标，但没有明显的联系。我必须改变以使其可见？ – David

D3.JS - 让我的链接可见

回答

相关问题