Javascript D3.js基于节点单个半径/直径自动调整字体大小

如何让D3.js根据每个节点的半径/直径自动调整其字体大小？

我使用的样式允许自动增加insize

  node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.className.substring(0, d.r / 3); })
      .style("font-size", "10px") // initial guess
//This is what gives it increased size...
      .style("font-size", function(d) { return (2 * d.r - 10) / this.getComputedTextLength() * 10 + "px"; })

；*10+“px”；}）

此效果将从较小的节点中删除文本。我也有一个缩放功能，我可以增加一个原本覆盖12像素的点来覆盖整个屏幕

.call(d3.behavior.zoom().scaleExtent([1, 200]).on("zoom", zoom))

是否有一种方法可以单独自动格式化节点字体以适当的大小写入，以便在放大被调用的节点时，字体将与节点大小成比例，而不是单一字体大小适合所有人

---

右侧列出了圆圈：名称（大小）
我很想从中学习一些有用的例子。因此，在图像大小下，驾驶圆圈以北靠近P的小绿点将有黑色的不可读单词，直到我们放大查看圆圈上写的内容。目标是在放大时具有成比例的可读字体。

您可以根据容器的大小动态设置文本大小。为此，必须添加文本，获取其边界框，获取容器元素的边界框，并基于当前字体大小和这些边界框导出正确的字体大小

代码看起来像这样

// ...
  .append("text")
  .text("text")
  .style("font-size", "1px")
  .each(getSize)
  .style("font-size", function(d) { return d.scale + "px"; });

function getSize(d) {
  var bbox = this.getBBox(),
      cbbox = this.parentNode.getBBox(),
      scale = Math.min(cbbox.width/bbox.width, cbbox.height/bbox.height);
  d.scale = scale;
}

---

为了偏移圆内的文本，而不是沿着直径运行，我采用了不同的实现方式：

dy

在圆内上下移动文本节点，并用于计算宽度或弦长以调整文本大小

然后，比例存储在文本元素的数据属性中，而不是修改源数据

---

或者，您可以创建嵌入每个节点的文本标签，如下所示：

this.g.append("g")
  .attr("class", "labels")
  .selectAll(".mytext")
  .data(NODE_DATA)
  .enter()
  .append("text")
  .text(function (d) {
     return d.LabelText; // Here label text is the text that you want to show in the node
  })
  .style("font-size", "1px")
  .attr("dy", ".35em") // You can adjust it
  .each(function (d) {
      var r = Number(d.Size), a = this.getComputedTextLength(),
          c=0.35, // Same as dy attribute value
          b = 2*Math.sqrt(r*r-c*c), s = Math.min(r, b/a);
      d.fs = s;
  })
  .style("font-size", function (d) {
     return d.fs + "px";
  })

---

工作出色。。。是否有一个简单的解决方法来获得单词前后的空间或将单词大小缩小几步？这完全取决于

cscale

的确定方式--您可以在那里添加一个因子，或者为空格的

bbox.width

添加一个常量偏移量。

this.g.append("g")
  .attr("class", "labels")
  .selectAll(".mytext")
  .data(NODE_DATA)
  .enter()
  .append("text")
  .text(function (d) {
     return d.LabelText; // Here label text is the text that you want to show in the node
  })
  .style("font-size", "1px")
  .attr("dy", ".35em") // You can adjust it
  .each(function (d) {
      var r = Number(d.Size), a = this.getComputedTextLength(),
          c=0.35, // Same as dy attribute value
          b = 2*Math.sqrt(r*r-c*c), s = Math.min(r, b/a);
      d.fs = s;
  })
  .style("font-size", function (d) {
     return d.fs + "px";
  })