0

「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のサンプルコードのセットですが、今後の開発で変更される予定です。

助けてくれてありがとう。

編集：スクリプト全体がどのように機能するか/機能しないかを示すために、より多くのコードを投稿しました。

4

2 に答える 2

0

現在、ノードとリンクは空の配列です。したがって、何も表示されないはずです。

次のようにオブジェクトリンク配列を追加できます。

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

ここで、node objは、 nodes配列内のオブジェクトへの参照です。

于 2012-05-24T19:47:40.707 に答える
0

何がそれを作ったのか正確にはわかりませんが、今は機能しています。

JSONが機能することを拒否したため、ノードとリンクを1つの変数に格納しました。これで、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-07T07:32:42.767 に答える