D3js版本3到D3js版本4

时间：2016-10-10 17:30:30

标签： d3.js

我正在将我的代码从D3js版本3更新为D3js版本4。

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

我的网站链接： 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>

谢谢。

1 个答案:

答案 0 :(得分：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 + ")";
  });

运行代码：

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题