个人中心
gpt4 book ai didi

javascript - 文本不显示在 d3js 中的圆圈中间

转载 作者：行者123 更新时间：2023-11-29 10:08:02 24 4
gpt4 key购买 nike

以下代码在 d3js 中打包圆圈。 

csjson = {
  "children": [{
    "name": "DirtySprite",
    "count": 8833
  }, {
    "name": "LineSprite",
    "count": 1732
  }]
};

var diameter = 200;
var pack = d3.layout.pack().size([diameter - 4, diameter - 4]).padding(2).sort(function(a, b) {
  return Math.random();
}).value(function(d) {
  return d.count;
});

var svg = d3.select("body").append("svg").attr("width", diameter).attr("height", diameter);

var vis = svg.datum((csjson)).selectAll(".node").data(pack.nodes).enter().append("g");
var titles = vis.append("title")
  .attr("x", function(d) {
    return d.x;
  }).attr("y", function(d) {
    return d.y;
  }).text(function(d) {
    return d.children ? "" : (d.name + ' ' + d.count);
  });

var circles = vis.append("circle")
  .attr("stroke", "black")
  .style("fill", function(d) {
    return !d.children ? "tan" : "beige";
  })
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .attr("r", function(d) {
    return d.r;
  });

var textLabels = vis.filter(function(d) {
    return !d.children;
  }).append("text").style("text-anchor", "middle")
  .text(function(d) {
    return d.name.substring(0, d.r / 3);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body>
</body>

圆圈的形式正确，但标签显示在屏幕的左上角而不是圆圈的中心。

var textLabels = vis.filter(function(d) {
    return !d.children;
}).append("text").style("text-anchor", "middle")
  .text(function(d) {
    return d.name.substring(0, d.r / 3);
});

如何在圆圈中间显示文字？

最佳答案

问题是因为您没有将 x 和 y 值设置为文本 DOM。

取而代之的是:

var textLabels = vis.filter(function(d) {
    return !d.children;
}).append("text").style("text-anchor", "middle")
  .text(function(d) {
    return d.name.substring(0, d.r / 3);
});

必须是

var textLabels = vis.filter(function(d) {
    return !d.children;
  }).append("text").style("text-anchor", "middle") .attr("x", function(d) {
    return d.x;
  }).attr("y", function(d) {
    return d.y;
  })
  .text(function(d) {
    return d.name.substring(0, d.r / 3);
  });

工作 fiddle here

关于javascript - 文本不显示在 d3js 中的圆圈中间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39362590/

24 4 0
文章推荐： java - 按下主页按钮时在android中保存 Activity 状态
文章推荐： javascript - 不想只在 moment.js 中显示当前年份的年份
文章推荐： 看起来像 : public static > DenseVector valueOf(F. .. 元素的 Java 方法)...它们是什么？
文章推荐： c# - Entity Framework 数据库第一代崩溃MYSQL
行者123
个人简介

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

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