D3js версии 3 до версии 4 D3js

Question

Я обновляю свой код от D3js версии 3 до версии 4. D3js

Проблема заключается в том, что связи между узлами не появляются.

Ссылка моего веб-сайта: http://xn--lamejorcompaia-1nb.com/tabla2/nueva.html

Код:

<script> 
var links = [ 

    {source: "Rodrigo", target: "BDA", type: "suit"}, 
    {source: "Rodrigo", target: "Pogalmex", type: "suit"}, 
    {source: "Rodrigo", target: "R. Metálicos", type: "suit"}, 
    {source: "Rodrigo", target: "Twitter Cards", type: "licensing"}, 
    {source: "Rodrigo", target: "Esoterismo", type: "licensing"}, 
    {source: "Rodrigo", target: "Pro Agua", type: "resolved"}, 
    {source: "Rodrigo", target: "Larwer", type: "suit"}, 
    {source: "Rodrigo", target: "Lei", type: "suit"}, 
    {source: "Rodrigo", target: "Barsa", type: "suit"}, 
    {source: "Rodrigo", target: "Fiasa", type: "suit"}, 
    {source: "Rodrigo", target: "Seg. Monterrey", type: "suit"}, 
    {source: "Rodrigo", target: "Gpo. Suerte", type: "suit"}, 
    {source: "Rodrigo", target: "Acerimallas", type: "suit"}, 
    {source: "Rodrigo", target: "Fundación Aadar", type: "suit"}, 
    {source: "Rodrigo", target: "Marca Madera", type: "suit"}, 
    {source: "Rodrigo", target: "Código Viza", type: "suit"}, 
    {source: "Rodrigo", target: "Jovi", type: "suit"}, 
    {source: "Rodrigo", target: "Wundertec", type: "resolved"}, 
    {source: "Rodrigo", target: "Algordanza", type: "licensing"}, 
    {source: "Mariana", target: "Comanosa", type: "resolved"}, 
    {source: "Rodrigo", target: "Bramex", type: "suit"}, 
    {source: "Mariana", target: "Hoja Santa", type: "suit"}, 
    {source: "Mariana", target: "Inventec", type: "suit"}, 
    {source: "Mariana", target: "Textilmex", type: "suit"}, 
    {source: "Mariana", target: "Esoterismo", type: "licensing"}, 
    {source: "Mariana", target: "Xtrashield", type: "suit"}, 
    {source: "Mariana", target: "Twitter Cards", type: "licensing"}, 
    {source: "Mariana", target: "Pro Agua", type: "licensing"}, 
    {source: "Mariana", target: "Algordanza", type: "licensing"}, 
    {source: "Mariana", target: "Esmasa", type: "resolved"}, 

]; 

var nodes = {}; 


links.forEach(function(link) { 
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); 
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); 
}); 

var width = 1080, 
    height = 500; 

var simulation = d3.forceSimulation(nodes) 
    .nodes(d3.values(nodes)) 
    .force("link", d3.forceLink(links).distance(150))   
    .force("charge", d3.forceManyBody().strength(-500)) 
    //.force("collide", d3.forceCollide().radius(function(d) { return d.r + 0.5; }).iterations(2)) 
    // .force("x", d3.forceX().strength(0.002)) 
    // .force("y", d3.forceY().strength(0.002))    
    .force("center", d3.forceCenter(width /2, height/2)) 
    .on("tick", tick); 
    // .restart(); 


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


svg.append("defs").selectAll("marker") 
    .data(["links.suit", "linkslicensing", "linksresolved"]) 
    .enter() 
     .append("marker") 
     .attr("id", function(d,i) { return d; }) 
     .attr("viewBox", "0 -5 100 100") 
     .attr("refX", 15) 
     .attr("refY", -1.5) 
     .attr("markerWidth", 6) 
     .attr("markerHeight", 6) 
     .attr("orient", "auto") 
    .append("path") 
    .attr("d", "M0,-5L10,0L0,5"); 



var path = svg.append("g").selectAll("path") 
    .data(simulation.force("link" ,d3.forceLink(links))) 
    .enter() 
     .append("path") 
     .attr("class", function(d,i) { 
         return "link " + d.type; 
        }) 
     .attr("marker-end", function(d,i) { 
         return "url(#" + d.type + ")"; 
        }); 


var circle = svg.append("g").selectAll("circle") 
    .data(simulation.nodes()) 
    .enter() 
     .append("circle") 
     .classed("circle", true) 
     .attr("r", 8) 
     .call(d3.drag() 
     .on("start", dragstarted) 
     .on("drag", dragged) 
     .on("end", dragended)); 
     //.call(simulation.drag) 

function dragstarted() { 
    if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 
    d3.event.subject.fx = d3.event.subject.x; 
    d3.event.subject.fy = d3.event.subject.y; 
} 
function dragged() { 
    d3.event.subject.fx = d3.event.x; 
    d3.event.subject.fy = d3.event.y; 
} 
function dragended() { 
    if (!d3.event.active) simulation.alphaTarget(0); 
    d3.event.subject.fx = null; 
    d3.event.subject.fy = null; 
} 


var text = svg.append("g").selectAll("text") 
    .data(simulation.nodes()) 
    .enter().append("text") 
    .attr("x", 4) 
    .attr("y", ".2em") 
    .text(function(d,i) { 
     return d.name; 
    }); 


// Use elliptical arc path segments to doubly-encode directionality. 
function tick() { 
    path.attr("d", linkArc); 
    circle.attr("transform", transform); 
    text.attr("transform", transform); 

} 

function linkArc(d,i) { 
    var dx = d.target.x - d.source.x, 
     dy = d.target.y - d.source.y, 
     dr = Math.sqrt(dx * dx + dy * dy); 
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; 

} 

function transform(d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
} 

</script> 

Спасибо.

Answer 1

Неправильно переданные ссылки .data. Это должно быть просто так просто, как:

var path = svg.append("g").selectAll("path") 
    .data(links) 
    .enter() 
    .append("path") 
    .attr("class", function(d, i) { 
    return "link " + d.type; 
    }) 
    .attr("marker-end", function(d, i) { 
    return "url(#" + d.type + ")"; 
    }); 

---

Запуск кода:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var links = [ 
 

 
     { 
 
     source: "Rodrigo", 
 
     target: "BDA", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Pogalmex", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "R. Metálicos", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Twitter Cards", 
 
     type: "licensing" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Esoterismo", 
 
     type: "licensing" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Pro Agua", 
 
     type: "resolved" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Larwer", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Lei", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Barsa", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Fiasa", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Seg. Monterrey", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Gpo. Suerte", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Acerimallas", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Fundación Aadar", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Marca Madera", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Código Viza", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Jovi", 
 
     type: "suit" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Wundertec", 
 
     type: "resolved" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Algordanza", 
 
     type: "licensing" 
 
     }, { 
 
     source: "Mariana", 
 
     target: "Comanosa", 
 
     type: "resolved" 
 
     }, { 
 
     source: "Rodrigo", 
 
     target: "Bramex", 
 
     type: "suit" 
 
     }, { 
 
     source: "Mariana", 
 
     target: "Hoja Santa", 
 
     type: "suit" 
 
     }, { 
 
     source: "Mariana", 
 
     target: "Inventec", 
 
     type: "suit" 
 
     }, { 
 
     source: "Mariana", 
 
     target: "Textilmex", 
 
     type: "suit" 
 
     }, { 
 
     source: "Mariana", 
 
     target: "Esoterismo", 
 
     type: "licensing" 
 
     }, { 
 
     source: "Mariana", 
 
     target: "Xtrashield", 
 
     type: "suit" 
 
     }, { 
 
     source: "Mariana", 
 
     target: "Twitter Cards", 
 
     type: "licensing" 
 
     }, { 
 
     source: "Mariana", 
 
     target: "Pro Agua", 
 
     type: "licensing" 
 
     }, { 
 
     source: "Mariana", 
 
     target: "Algordanza", 
 
     type: "licensing" 
 
     }, { 
 
     source: "Mariana", 
 
     target: "Esmasa", 
 
     type: "resolved" 
 
     }, 
 

 
    ]; 
 

 
    var nodes = {}; 
 

 

 
    links.forEach(function(link) { 
 
     link.source = nodes[link.source] || (nodes[link.source] = { 
 
     name: link.source 
 
     }); 
 
     link.target = nodes[link.target] || (nodes[link.target] = { 
 
     name: link.target 
 
     }); 
 
    }); 
 

 
    var width = 1080, 
 
     height = 500; 
 

 
    var simulation = d3.forceSimulation(nodes) 
 
     .nodes(d3.values(nodes)) 
 
     .force("link", d3.forceLink(links).distance(150)) 
 
     .force("charge", d3.forceManyBody().strength(-500)) 
 
     //.force("collide", d3.forceCollide().radius(function(d) { return d.r + 0.5; }).iterations(2)) 
 
     // .force("x", d3.forceX().strength(0.002)) 
 
     // .force("y", d3.forceY().strength(0.002))    
 
     .force("center", d3.forceCenter(width/2, height/2)) 
 
     .on("tick", tick); 
 
    // .restart(); 
 

 

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

 

 
    svg.append("defs").selectAll("marker") 
 
     .data(["links.suit", "linkslicensing", "linksresolved"]) 
 
     .enter() 
 
     .append("marker") 
 
     .attr("id", function(d, i) { 
 
     return d; 
 
     }) 
 
     .attr("viewBox", "0 -5 100 100") 
 
     .attr("refX", 15) 
 
     .attr("refY", -1.5) 
 
     .attr("markerWidth", 6) 
 
     .attr("markerHeight", 6) 
 
     .attr("orient", "auto") 
 
     .append("path") 
 
     .attr("d", "M0,-5L10,0L0,5"); 
 

 

 

 
    var path = svg.append("g").selectAll("path") 
 
     .data(links) 
 
     .enter() 
 
     .append("path") 
 
     .attr("class", function(d, i) { 
 
     return "link " + d.type; 
 
     }) 
 
     .attr("marker-end", function(d, i) { 
 
     return "url(#" + d.type + ")"; 
 
     }); 
 

 

 
    var circle = svg.append("g").selectAll("circle") 
 
     .data(simulation.nodes()) 
 
     .enter() 
 
     .append("circle") 
 
     .classed("circle", true) 
 
     .attr("r", 8) 
 
     .call(d3.drag() 
 
     .on("start", dragstarted) 
 
     .on("drag", dragged) 
 
     .on("end", dragended)); 
 
    //.call(simulation.drag) 
 

 
    function dragstarted() { 
 
     if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 
 
     d3.event.subject.fx = d3.event.subject.x; 
 
     d3.event.subject.fy = d3.event.subject.y; 
 
    } 
 

 
    function dragged() { 
 
     d3.event.subject.fx = d3.event.x; 
 
     d3.event.subject.fy = d3.event.y; 
 
    } 
 

 
    function dragended() { 
 
     if (!d3.event.active) simulation.alphaTarget(0); 
 
     d3.event.subject.fx = null; 
 
     d3.event.subject.fy = null; 
 
    } 
 

 

 
    var text = svg.append("g").selectAll("text") 
 
     .data(simulation.nodes()) 
 
     .enter().append("text") 
 
     .attr("x", 4) 
 
     .attr("y", ".2em") 
 
     .text(function(d, i) { 
 
     return d.name; 
 
     }); 
 

 

 
    // Use elliptical arc path segments to doubly-encode directionality. 
 
    function tick() { 
 
     path.attr("d", linkArc); 
 
     circle.attr("transform", transform); 
 
     text.attr("transform", transform); 
 

 
    } 
 

 
    function linkArc(d, i) { 
 
     var dx = d.target.x - d.source.x, 
 
     dy = d.target.y - d.source.y, 
 
     dr = Math.sqrt(dx * dx + dy * dy); 
 
     return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; 
 

 
    } 
 

 
    function transform(d) { 
 
     return "translate(" + d.x + "," + d.y + ")"; 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>