D3.js D3js版本3至D3js版本4

我正在将代码从D3js版本3更新到D3js版本4

问题是节点之间的链接不会出现

我的网站的链接：

守则：

<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>

变量链接=[
{来源：“Rodrigo”，目标：“BDA”，类型：“suit”}，
{来源：“Rodrigo”，目标：“Pogalmex”，类型：“suit”}，
{来源：“Rodrigo”，目标：“R.Metálicos”，类型：“suit”}，
{来源：“Rodrigo”，目标：“Twitter卡”，键入：“许可证”}，
{来源：“Rodrigo”，目标：“Esterismo”，类型：“licensing”}，
{来源：“Rodrigo”，目标：“Pro Agua”，类型：“resolved”}，
{来源：“Rodrigo”，目标：“Larwer”，类型：“suit”}，
{来源：“Rodrigo”，目标：“Lei”，类型：“suit”}，
{来源：“Rodrigo”，目标：“Barsa”，类型：“suit”}，
{来源：“Rodrigo”，目标：“Fiasa”，类型：“suit”}，
{来源：“Rodrigo”，目标：“Seg.Monterrey”，类型：“suit”}，
{来源：“Rodrigo”，目标：“Gpo.Suerte”，类型：“suit”}，
{来源：“Rodrigo”，目标：“Acerimallas”，类型：“suit”}，
{来源：“Rodrigo”，目标：“Fundación Aadar”，键入：“suit”}，
{来源：“Rodrigo”，目标：“Marca Madera”，类型：“suit”}，
{来源：“Rodrigo”，目标：“Código Viza”，类型：“suit”}，
{来源：“Rodrigo”，目标：“Jovi”，类型：“suit”}，
{来源：“Rodrigo”，目标：“Wundertec”，类型：“resolved”}，
{来源：“Rodrigo”，目标：“Algordanza”，类型：“许可证”}，
{来源：“Mariana”，目标：“Comanosa”，类型：“resolved”}，
{来源：“Rodrigo”，目标：“Bramex”，类型：“suit”}，
{来源：“马里亚纳”，目标：“Hoja Santa”，键入：“suit”}，
{来源：“Mariana”，目标：“Inventec”，类型：“suit”}，
{来源：“Mariana”，目标：“Textilmex”，键入：“suit”}，
{来源：“马里亚纳”，目标：“密宗”，类型：“许可证”}，
{资料来源：“马里亚纳”，目标：“Xtrashield”，键入：“suit”}，
{来源：“玛丽安娜”，目标：“推特卡”，键入：“许可证”}，
{来源：“Mariana”，目标：“Pro Agua”，类型：“许可证”}，
{来源：“Mariana”，目标：“Algordanza”，类型：“许可证”}，
{来源：“Mariana”，目标：“Esmasa”，类型：“resolved”}，
];
var节点={}；
links.forEach（函数（link）{
link.source=节点[link.source]| |（节点[link.source]={name:link.source}）；
link.target=节点[link.target]| |（节点[link.target]={name:link.target}）；
});
可变宽度=1080，
高度=500；
var模拟=d3.forceSimulation（节点）
.节点（d3.值（节点））
力（“链接”，d3。力链接（链接）。距离（150））
.力（“电荷”，d3.力人体（）.力（-500））
//.force（“collide”，d3.forceCollide（）.radius（函数（d）{return d.r+0.5；}）。迭代（2））
//.力（“x”，d3.力x（）.强度（0.002））
//.力（“y”，d3.力（）.强度（0.002））
.力（“中心”，d3.力中心（宽度/2，高度/2））
.在（“滴答”，滴答）上；
//.restart（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.分类（“svgg”，真实）；
svg.append（“defs”）.selectAll（“marker”）
.data（[“links.suit”、“linkslicensing”、“linksresolved”]）
.输入（）
.附加（“标记”）
.attr（“id”，函数（d，i）{返回d；}）
.attr（“视图框”，“0-51000”）
.attr（“参考文献”，第15页）
.attr（“参考文献”，-1.5）
.attr（“markerWidth”，6）
.attr（“markerHeight”，6）
.attr（“方向”、“自动”）
.append（“路径”）
.attr（“d”，“M0，-5L10,0L0,5”）；
var path=svg.append（“g”）.selectAll（“path”）
.数据（模拟力（“链接”，d3.力链接（链接）））
.输入（）
.append（“路径”）
.attr（“类”，函数（d，i）{
返回“链接”+d.type；
})
.attr（“标记结束”，函数（d，i）{
返回“url（#“+d.type+”）；
});
var circle=svg.append（“g”）.selectAll（“circle”）
.data（simulation.nodes（））
.输入（）
.附加（“圆圈”）
.classed（“圆”，真）
.attr（“r”，8）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
//.call（simulation.drag）
函数dragstarted（）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d3.event.subject.fx=d3.event.subject.x；
d3.event.subject.fy=d3.event.subject.y；
}
函数（）{
d3.event.subject.fx=d3.event.x；
d3.event.subject.fy=d3.event.y；
}
函数dragended（）{
如果（！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（“文本”）
.attr（“x”，4）
.attr（“y”，“.2em”）
.text（函数（d，i）{
返回d.name；
});
//使用椭圆弧路径段对方向性进行双重编码。
函数tick（）{
路径属性（“d”，链接弧）；
circle.attr（“transform”，transform）；
attr（“transform”，transform）；
}
功能链接弧（d，i）{
变量dx=d.target.x-d.source.x，
dy=d.target.y-d.source.y，
dr=Math.sqrt（dx*dx+dy*dy）；
返回“M”+d.source.x+”、“+d.source.y+”A“+dr+”、“+dr+”0,1“+d.target.x+”、“+d.target.y”；
}
函数变换（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
}

---

谢谢。

您将链接错误地传递到

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

---

运行代码：

变量链接=[
{
资料来源：“Rodrigo”，
目标：“BDA”，
类型：“西装”
}, {
资料来源：“Rodrigo”，
目标：“Pogalmex”，
类型：“西装”
}, {
资料来源：“Rodrigo”，
目标：“R.Metálicos”，
类型：“西装”
}, {
资料来源：“Rodrigo”，
目标：“推特卡”，
类型：“许可证”
}, {
资料来源：“Rodrigo”，
目标：“秘术”，
类型：“许可证”
}, {
资料来源：“Rodrigo”，
目标：“支持Agua”，
类型：“已解决”
}, {
资料来源：“Rodrigo”，
目标：“拉威尔”，
类型：“西装”
}, {
资料来源：“Rodrigo”，
目标：“雷