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

Question

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

我使用了一种允许自动增加尺寸的样式

  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 + “像素”； })

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

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

有没有一种方法可以自动单独格式化节点字体；以适当的大小书写，这样当放大时，调用的节点字体将与节点大小成比例，而不是单一字体-尺码适合所有人？

正确的列表圈子:NAME(SIZE)
我希望有一个工作示例可供学习。因此，在图像尺寸下，驾驶圆圈以北 P 旁边的小绿点将有黑色不可读的文字，直到我们放大以查看圆圈上写的内容。目标是在放大时具有成比例的可读字体..？

Answer 1

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

代码看起来像这样。

// ...
  .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;
}