d3.js를 사용하여 함수를 대신 사용하여 코드를 추가하려면 어떻게해야합니까?

svg 태그와 d3 force 함수와 함께 사용하기위한 변수 링크에 노드를 추가하는 함수를 만들려고합니다.하지만 그렇게 할 수 없습니다.d3.js를 사용하여 함수를 대신 사용하여 코드를 추가하려면 어떻게해야합니까?

는이 코드가 있습니다

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

link = layer_graph.selectAll(".link") 
    .data(graph.links) 
    .enter() 
    .append("path") 
    .attr("stroke-width", 3) 
    .attr("d", "") 
    .on("mouseover", function(d) { 
     d3.select(this) 
      .classed("link_over", true); 
    }) 
    .on("mouseout", function(d) { 
     d3.select(this) 
      .classed("link_over", false); 
    });

을 그리고 난 그런 식으로 뭔가를 변경하려면 :

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

layer_graph.selectAll(".link") 
    .data(graph.links) 
    .enter() 
//It does not work (of course) 
    .call(function(d,i) { 
     something = something2.append("path") 
      .attr("stroke-width", 3) 
      .attr("d", "") 
      .on("mouseover", function(d) { 
       d3.select(this) 
        .classed("link_over", true); 
      }) 
      .on("mouseout", function(d) { 
       d3.select(this) 
        .classed("link_over", false); 
      }); 
     link.push(something); 
    });

나는 다른 방법을 시도하고있다 그리고 나는 해결책을 찾지 못했습니다.

출처

2014-04-25 tres.14159

당신이 뭘 하려는지 :

는 그리고 이건 내 구현? D3이 추가 된 요소 아래에 여러 요소를 그룹화 하시겠습니까? –

빠른 응답을 보내 주셔서 감사합니다 :). 음 "링크 생성"코드를 init 그래프와 ajax 호출에서 사용하기위한 함수로 그룹화하려고합니다. –

다른 방법으로 시도하고 있지만 ... 실행되고 있지 않습니다. http://pastebin.com/J5iuxRGV –

나는이 솔루션을 발견했다고 생각한다. 나는이 예제를 실증하고있다. Modifying a Force Layout (감사).

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
    .link { 
     stroke: #000; 
     stroke-width: 1.5px; 
    } 

    .node { 
     fill: #000; 
     stroke: #fff; 
     stroke-width: 1.5px; 
    } 
</style> 
<body> 
<script src="http://d3js.org/d3.v3.js"></script> 
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> 
<script> 

var width = 960; 
var height = 500; 

var color = d3.scale.category20(); 

var nodes = []; 
var links = []; 

var force = d3.layout.force() 
    .nodes(nodes) 
    .links(links) 
    .charge(-400) 
    .linkDistance(120) 
    .size([width, height]) 
    .on("tick", tick); 

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

var node = svg.selectAll(".node"); 
var link = svg.selectAll(".link"); 

var a = {id: "a"}, b = {id: "b"}, c = {id: "c"}; 
nodes.push(a, b, c); 
links.push({source: a, target: b}, {source: a, target: c}); 
repaint(); 

var d = {id: "d"} 
nodes.push(d); 
links.push({source: a, target: d}, {source: b, target: d}); 
repaint(); 

var e = {id: "e"} 
nodes.push(e); 
links.push({source: d, target: e}); 
repaint(); 

var f = {id: "f"} 
nodes.push(f); 
links.push({source: f, target: d}); 
repaint(); 

ajax(); 

function repaint() { 
    link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; }); 
    link.enter().insert("line", ".node").attr("class", "link"); 
    link.exit().remove(); 

    node = node.data(force.nodes(), function(d) { return d.id;}); 
    node.enter().append("circle").attr("class", function(d) { return "node " + d.id; }).attr("r", 8).style("fill", function(d) { return color(d.id); }); 
    node.exit().remove(); 

    force.start(); 
} 

function ajax() { 
    jQuery.ajax({ 
     url: "no_exists.html", 
     timeout: 5000, 
     success: function() { 
      setTimeout(function(){ajax();}, 2000); 
      create_random_node(); 
     }, 
     error: function() { 
      setTimeout(function(){ajax();}, 2000); 
      create_random_node(); 
     } 
    }); 
} 

function create_random_node() { 
    var id = Math.random().toString(36).substring(2); 
    var temp_node = {"id": id}; 

    nodes.push(temp_node); 
    links.push({ 
     source: nodes[Math.floor(Math.random() * nodes.length)], 
     target: temp_node}); 

    repaint(); 
} 

function tick() { 
    node.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }) 

    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; }); 
} 

</script>

출처

2014-04-26 22:06:55

d3.js를 사용하여 함수를 대신 사용하여 코드를 추가하려면 어떻게해야합니까?

답변

관련 문제