Javascript / D3.js /带标签的强制有向图

debugcn 发表于 Dev

乔1314

我正在尝试通过使用D3创建一个强制有向图。我已经创建了一个没有标签的图形，但是一旦我尝试在图形上放置标签，就会弄乱整个代码，甚至该图形也不会出现。我在检查了几个文档后编写了代码，但是我不知道该在哪里修复它。如果您可以让我知道这段代码的哪一部分出错，那么熟悉D3的任何人都将不胜感激。

<html>

<head>
  <meta charset="utf-8">
  <title>D3 v5 force simulation</title>
  <style>
    text {
      font-family: sans-serif;
      font-size: 10px;
    }

  </style>
</head>

<body>
  <svg width="500" height="600"></svg>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
 
  var nodesData = [
    {id:"Korea", "group": 1, "value": 10},
    {id:"USA", "group": 1, "value": 5},
    {id:"France", "group": 1, "value": 5},
    {id:"UK", "group": 1, "value": 5},
    {id:"Japan", "group": 1, "value": 20},
    {id:"Turkey", "group": 1, "value": 5},

  ]

  var linksData = [
    { "source": 'Korea', "target": 'USA'},
    { "source": 'UK', "target": 'USA' },
    { "source": 'France', "target": 'Turkey' },
    { "source": 'Korea', "target": 'UK' },
    { "source": 'Japan', "target": 'Turkey' },
    { "source": 'Japan', "target": 'Korea' }
  ]

<---added---->
 var svg = d3.select("svg"),
     width =  +svg.attr("width"),
     height = +svg.attr("height");

 <---changed---->
  var link = svg.append("g")
    .selectAll("line")
    .data(linksData)
    .enter()
    .append("line")
    .attr("stroke-width", 1)
    .attr("stroke", "black");


  <---changed---->
  var node = svg.append("g")
    .selectAll("g")
    .data(nodesData)
    .enter()
    .append("g")
    
<---changed---->
 var circles = node.append("circle")
    .data(nodesData)
    .attr("r", d => d.value)
    .attr("fill", "LightSalmon")
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

<---added---->
var labels = node.append("text")
    .text(function(d){return d.id;});
    



  var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(200, 150));

  simulation
    .nodes(nodesData)
    .on("tick", ticked);

  simulation.force("link")
    .links(linksData);


  function ticked() {
    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("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
  }


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

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

  function dragended(d) {
    if(!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
  </script>
</body>

</html>

<原始代码-不带标签的强制有向图>要放置标签，我只更改了几点。最初，节点和链接是分开设置的，但是将它们分组在一起放置标签。

 <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>D3 v5 force simulation</title>
</head>

<body>
  <svg width="400" height="300"></svg>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
  // 1. Data
  var nodesData = [
    {id:"Korea", "group": 1, "value":10},
    {id:"USA", "group": 1,"value":5},
    {id:"France", "group": 1,"value":5},
    {id:"UK", "group": 1,"value":5},
    {id:"Japan", "group": 1,"value":20},
    {id:"Turkey", "group": 1,"value":5},

  ]

  var linksData = [
    { "source": 'Korea', "target": 'USA'},
    { "source": 'UK', "target": 'USA' },
    { "source": 'France', "target": 'Turkey' },
    { "source": 'Korea', "target": 'UK' },
    { "source": 'Japan', "target": 'Turkey' },
    { "source": 'Japan', "target": 'Korea' }
  ]

  // 2. svg
  var link = d3.select("svg")
    .selectAll("line")
    .data(linksData)
    .enter()
    .append("line")
    .attr("stroke-width", 1)
    .attr("stroke", "black");

  var node = d3.select("svg")
    .selectAll("circle")
    .data(nodesData)
    .enter()
    .append("circle")
    .attr("r", d=> d.value)
    .attr("fill", "LightSalmon")
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

  // 3. forceSimulation
  var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(200, 150));

  simulation
    .nodes(nodesData)
    .on("tick", ticked);

  simulation.force("link")
    .links(linksData);

  // 4. forceSimulation 
  function ticked() {
    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("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
  }

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

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

  function dragended(d) {
    if(!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
  </script>
</body>

</html>

雨果·埃哈伊·拉森（Hugo Elhaj-Lahsen）

由于节点是g元素，因此需要使用该transform属性来移动它们。我们使用translate(x,y)移动它的变换。

  function ticked() {
    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})` });
  }

现在g，我们正在翻译元素，因此直接对它们调用拖动处理程序：

  var node = svg.append("g")
    .selectAll("g")
    .data(nodesData)
    .enter()
    .append("g")
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

<head>
  <meta charset="utf-8">
  <title>D3 v5 force simulation</title>
  <style>
    text {
      font-family: sans-serif;
      font-size: 10px;
    }

  </style>
</head>

<body>
  <svg width="500" height="600"></svg>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
 
  var nodesData = [
    {id:"Korea", "group": 1, "value": 10},
    {id:"USA", "group": 1, "value": 5},
    {id:"France", "group": 1, "value": 5},
    {id:"UK", "group": 1, "value": 5},
    {id:"Japan", "group": 1, "value": 20},
    {id:"Turkey", "group": 1, "value": 5},

  ]

  var linksData = [
    { "source": 'Korea', "target": 'USA'},
    { "source": 'UK', "target": 'USA' },
    { "source": 'France', "target": 'Turkey' },
    { "source": 'Korea', "target": 'UK' },
    { "source": 'Japan', "target": 'Turkey' },
    { "source": 'Japan', "target": 'Korea' }
  ]

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

  var link = svg.append("g")
    .selectAll("line")
    .data(linksData)
    .enter()
    .append("line")
    .attr("stroke-width", 1)
    .attr("stroke", "black");


  var node = svg.append("g")
    .selectAll("g")
    .data(nodesData)
    .enter()
    .append("g")
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));
    
 var circles = node.append("circle")
    .data(nodesData)
    .attr("r", d => d.value)
    .attr("fill", "LightSalmon")

var labels = node.append("text")
    .text(function(d){return d.id;});
    



  var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(200, 150));

  simulation
    .nodes(nodesData)
    .on("tick", ticked);

  simulation.force("link")
    .links(linksData);


  function ticked() {
    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})` });
  }


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

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

  function dragended(d) {
    if(!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
  </script>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。