D3.js基于节点个体半径/直径的自动字体调整 [英] D3.js Auto font-sizing based on nodes individual radius/diameter

问题描述

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

允许自动增加insize的样式

I use a style that allows automatic increase 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; }）

; * 10 + "px"; })

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

This effect removes the text from the smaller nodes. I also have a zoom function that I can increase a dot that originally cover 12 px to cover my entire screen.

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

有一种方式我可以单独自动格式化节点字体以适当的大小写入，所以当放大被调用的节点字体将显示与节点大小成比例的单个font-size适合所有？

Is there a way I can automatically format node-font individually; to write at appropriate sizes so when zoom-in the called node-font will appear proportionate to node-size vs a single font-size fits all?

>

右侧列表圈子：NAME（SIZE）
我想要一个可以学习的实例。所以在图像尺寸上，在P旁边的驱动圆圈北边的小绿点将具有黑色不可读的字，直到我们放大以看到写在圆圈上的东西。目标是在放大时具有成比例的可读字体。

The Right Lists Circles: NAME(SIZE)
I would love a working examples to learn from. So at the image size the little green dot north of driving circle next to the P would have black unreadable words until we zoom in to see what is written on the circle. The goal is to have proportionate readable font when zoomed in..?

推荐答案

您可以通过动态设置基于文本大小关于容器的尺寸。为此，您必须添加文本，获取其边界框，获取容器元素的边框，并基于当前的字体大小和那些边框获得正确的字体大小。

You can do this by dynamically setting the text size based on the size of the container. For this, you have to add the text, get its bounding box, get the bounding box of the container element and derive the correct font size based on the current font size and those bounding boxes.

代码看起来像这样。

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

这篇关于D3.js基于节点个体半径/直径的自动字体调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！