个人中心
gpt4 book ai didi

javascript - 在d3.js中显示 TreeMap 中节点内的文本

转载 作者：行者123 更新时间：2023-12-04 10:38:22 29 4
gpt4 key购买 nike

我在 d3.js 中使用简单的垂直树图，其中我需要显示圆圈内每个节点的名称和计数。我正在处理的链接 https://codesandbox.io/s/cool-field-vsc6m .
现在名称显示在圆圈外。我想在圆圈内包含节点的名称和计数

var treeData = {
  name: "Top Level",
  children: [
    {
      name: "Level 2: A",
      count: 600,
      children: [
        { name: "Son of A", count: 200 },
        { name: "Daughter of A", count: 300 }
      ]
    },
    { name: "Level 2: B", count: 100 }
  ]
};
var margin = { top: 40, right: 90, bottom: 50, left: 90 },
      width = 660 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    // declares a tree layout and assigns the size
    var treemap = d3.tree().size([width, height]);

    //  assigns the data to a hierarchy using parent-child relationships
    var nodes = d3.hierarchy(treeData);

    // maps the node data to the tree layout
    nodes = treemap(nodes);

    // append the svg obgect to the body of the page
    // appends a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom),
      g = svg
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // adds the links between the nodes
    var link = g
      .selectAll(".link")
      .data(nodes.descendants().slice(1))
      .enter()
      .append("path")
      .attr("class", "link")
      .attr("d", function(d) {
        return (
          "M" +
          d.x +
          "," +
          d.y +
          "C" +
          d.x +
          "," +
          (d.y + d.parent.y) / 2 +
          " " +
          d.parent.x +
          "," +
          (d.y + d.parent.y) / 2 +
          " " +
          d.parent.x +
          "," +
          d.parent.y
        );
      });

    // adds each node as a group
    var node = g
      .selectAll(".node")
      .data(nodes.descendants())
      .enter()
      .append("g")
      .attr("class", function(d) {
        return "node" + (d.children ? " node--internal" : " node--leaf");
      })
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      })
      .on("mouseover", function(d) {
        var g = d3.select(this); // The node
        // The class is used to remove the additional text later
        var info = g
          .append("text")
          .classed("info", true)
          .attr("x", 20)
          .attr("y", 10)
          .text("More info");
      })
      .on("mouseout", function() {
        // Remove the info text on mouse out.
        d3.select(this)
          .select("text.info")
          .remove();
      });

    // adds the circle to the node
    node.append("circle").attr("r", 10);

    // adds the text to the node
    node
      .append("text")
      .attr("dy", ".35em")
      .attr("y", function(d) {
        return d.children ? -20 : 20;
      })
      .style("text-anchor", "middle")
      .text(function(d) {
        return d.data.name;
      });

最佳答案

我对您现有的代码进行了必要的更改，以显示圆圈内每个节点的名称和数量。

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
  <script src="http://d3js.org/d3.v5.min.js"></script>
  <style>

    .node {
      cursor: pointer;
    }

    .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
      /* If you want dots under the hoverable text */
    }

    path.link {
      fill: rgb(133, 129, 196);
      stroke: #333;
      stroke-width: 1.5px;
    }

    /* Tooltip text */

    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      padding: 5px 0;
      border-radius: 6px;

      /* Position the tooltip text - see examples below! */
      position: absolute;
      z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */

    .tooltip:hover .tooltiptext {
      visibility: visible;
    }

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

    .node text {
      font: 12px sans-serif;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .node--internal text {
      text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
    }

    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }
  </style>
</head>

<body>


  <script type="text/javascript">
  var treeData = {
    name: "Top Level",
    count: 1200,
    children: [
      {
        name: "Level 2: A",
        count: 600,
        children: [
          { name: "Son of A", count: 200 },
          { name: "Daughter of A", count: 300 }
        ]
      },
      { name: "Level 2: B", count: 100 }
    ]
  };
var margin = { top: 50, right: 90, bottom: 50, left: 90 },
      width = 660 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    // declares a tree layout and assigns the size
    var treemap = d3.tree().size([width, height]);

    //  assigns the data to a hierarchy using parent-child relationships
    var nodes = d3.hierarchy(treeData);

    // maps the node data to the tree layout
    nodes = treemap(nodes);

    // append the svg obgect to the body of the page
    // appends a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom),
      g = svg
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // adds the links between the nodes
    var link = g
      .selectAll(".link")
      .data(nodes.descendants().slice(1))
      .enter()
      .append("path")
      .attr("class", "link")
      .attr("d", function(d) {
        return (
          "M" +
          d.x +
          "," +
          d.y +
          "C" +
          d.x +
          "," +
          (d.y + d.parent.y) / 2 +
          " " +
          d.parent.x +
          "," +
          (d.y + d.parent.y) / 2 +
          " " +
          d.parent.x +
          "," +
          d.parent.y
        );
      });

    // adds each node as a group
    var node = g
      .selectAll(".node")
      .data(nodes.descendants())
      .enter()
      .append("g")
      .attr("class", function(d) {
        return "node" + (d.children ? " node--internal" : " node--leaf");
      })
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      })
      .on("mouseover", function(d) {
        var g = d3.select(this); // The node
        // The class is used to remove the additional text later
        var info = g
          .append("text")
          .classed("info", true)
          .attr("x", 20)
          .attr("y", 10)
          .text("More info");
      })
      .on("mouseout", function() {
        // Remove the info text on mouse out.
        d3.select(this)
          .select("text.info")
          .remove();
      });

    // adds the circle to the node
    node.append("circle").attr("r", 45);

    // adds the text to the node
    node
      .append("text")
      .attr("dy", ".35em")
      .attr("y", function(d) {
        // return d.children ? -20 : 20;
        return -10;
      })
      .style("text-anchor", "middle")
      .text(function(d) {
        return d.data.name;
      });

          node
      .append("text")
      .attr("dy", ".35em")
      .attr("y", function(d) {
        return 10;
      })
      .style("text-anchor", "middle")
      .text(function(d) {
        return d.data.count;
      });

</script>
</body>

</html>

关于javascript - 在d3.js中显示 TreeMap 中节点内的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60051108/

29 4 0
文章推荐： amazon-web-services - cdk diff 与控制台更改没有区别
文章推荐： typescript - 参数类型 'saga' 和 'saga' 不兼容
文章推荐： express - 未提供 `public` 文件夹内的静态文件(使用 ExpressJS 的 NextJS 自定义服务器)
文章推荐： jenkins - 如何使用自定义提交消息设置 web-hook？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com