d3.js 可视化不正确

问题描述 投票：0回答：1

我有一个用于学习 d3.js 的简单示例。 我的目标是从 json 数据结构开始绘制一棵树。 我发现 d3.js 库对于完成这项工作非常有用，因此我尝试创建一个最小示例来了解基础知识。 正如您从附图中看到的，绘制了链接，但并非所有节点都未绘制。最后一个，皮波，没有被绘制出来。 缺少什么？

有人可以帮助我吗？

非常感谢！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collapsible Tree with D3.js</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    .node {
      cursor: pointer;
    }

    .node circle {
      fill: #fff;
      stroke: steelblue;
      stroke-width: 3px;
    }

    .node text {
      font: 12px sans-serif;
    }
    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }
  </style>
</head>
<body>

<script>
  // Sample JSON data
  const treeData = {
    "name": "Root",
    "children": [
      {
        "name": "Child 1",
        "children": [
          {
            "name": "Child 1.1",
            "children": [
              {
                "name":"Pippo"
              }
            ]
          },
          { "name": "Child 1.2" }
        ]
      },
      {
        "name": "Child 2",
        "children": [
          { "name": "Child 2.1" },
          { "name": "Child 2.2" }
        ]
      }
    ]
  };

  // ************** Generate the tree diagram  *****************
  var margin = {top: 20, right: 120, bottom: 20, left: 120},
  width = 960 - margin.right - margin.left,
  height = 500 - margin.top - margin.bottom;
  
  var i = 0;

  // Create SVG container
  const svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(50, 20)");

  // Create hierarchical data structure
  const root = d3.hierarchy(treeData);
  var tree = d3.tree().size([height, width]);
  tree(root);

  // Create links
  const link = svg.selectAll(".link")
    .data(root.links())
    .enter().append("path")
    .attr("class", "link")
    .attr("d", d3.linkHorizontal()
      .x(d => d.y)
      .y(d => d.x)
    );

  // Create nodes
  const node = svg.selectAll(".node")
    .data(root.descendants())
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", d => `translate(${d.y},${d.x})`);

  // Debug print of structure
  console.log("Nodes are: "); 
  console.log(node); 

  // Add circles to nodes
  node.append("circle")
    .attr("r", 10);

  // Add text to nodes
  node.append("text")
    .attr("y", -20)
    .attr("x", -16)
    .attr("text-anchor", d => ("start"))
    .text(d => d.data.name);

</script>

</body>
</html>

结果如下：

javascript d3.js
1个回答
0
投票

遵循 D3.js 中的标准边距约定。 d3.js 边距约定


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collapsible Tree with D3.js</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    .node {
      cursor: pointer;
    }

    .node circle {
      fill: #fff;
      stroke: steelblue;
      stroke-width: 3px;
    }

    .node text {
      font: 12px sans-serif;
    }
    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }
  </style>
</head>
<body>

<script>
  // Sample JSON data
  const treeData = {
    "name": "Root",
    "children": [
      {
        "name": "Child 1",
        "children": [
          {
            "name": "Child 1.1",
            "children": [
              {
                "name":"Pippo"
              }
            ]
          },
          { "name": "Child 1.2" }
        ]
      },
      {
        "name": "Child 2",
        "children": [
          { "name": "Child 2.1" },
          { "name": "Child 2.2" }
        ]
      }
    ]
  };

  // ************** Generate the tree diagram  *****************
  var margin = {top: 20, right: 50, bottom: 20, left: 50},
  width = 960 - margin.right - margin.left,
  height = 500 - margin.top - margin.bottom;
  
  var i = 0;

  // Create SVG container
  const svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

  // Create hierarchical data structure
  const root = d3.hierarchy(treeData);
  var tree = d3.tree().size([height, width]);
  tree(root);

  // Create links
  const link = svg.selectAll(".link")
    .data(root.links())
    .enter().append("path")
    .attr("class", "link")
    .attr("d", d3.linkHorizontal()
      .x(d => d.y)
      .y(d => d.x)
    );

  // Create nodes
  const node = svg.selectAll(".node")
    .data(root.descendants())
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", d => `translate(${d.y},${d.x})`);

  // Debug print of structure
  console.log("Nodes are: "); 
  console.log(node); 

  // Add circles to nodes
  node.append("circle")
    .attr("r", 10);

  // Add text to nodes
  node.append("text")
    .attr("y", -20)
    .attr("x", -16)
    .attr("text-anchor", d => ("start"))
    .text(d => d.data.name);

</script>

</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.