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

Question

如何让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))

有没有办法可以单独自动格式化节点字体; 以适当的大小编写所以当放大时,被调节的节点字体将与节点大小成比例,而单个字体大小适合全部？

正确的名单圈子:名称(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;
}