在D3.js中使用自动文本大小进行可缩放圆形打包

我试图合并Mike的两个示例：可缩放圆包装+自动文本大小。

它在最初显示在顶层时起作用。 但是，如果放大到下一个级别，则字体大小不正确。

我不确定是否需要修改转换，或修改计算字体大小的部分。

这是我的codepen：http://codepen.io/anon/pen/GJWqrL

var circleFill = function(d) {
    if (d['color']) {
        return d.color;
    } else {
        return d.children ? color(d.depth) : '#FFF';
    }
}

var calculateTextFontSize = function(d) {
    return Math.min(2 * d.r, (2 * d.r - 8) / this.getComputedTextLength() * 11) + "px";
}

var margin = 20,
    diameter = 960;

var color = d3.scale.linear()
    .domain([-1, 18])
    .range(["hsl(0,0%,100%)", "hsl(228,30%,40%)"])
    .interpolate(d3.interpolateHcl);

var pack = d3.layout.pack()
    .padding(2)
    .size([diameter - margin, diameter - margin])
    .value(function(d) {
        return d.size;
    })

var svg = d3.select("body").append("svg")
    .attr("width", window.innerWidth)
    .attr("height", window.innerHeight)
    .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

var focus = root,
    nodes = pack.nodes(root),
    view;

var circle = svg.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .attr("class", function(d) {
        return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root";
    })
    .style("fill", circleFill)
    .on("click", function(d) {
        if (focus !== d) zoom(d), d3.event.stopPropagation();
    });

circle.append("svg:title")
    .text(function(d) {
        return d.name;
    })

var text = svg.selectAll("text")
    .data(nodes)
    .enter().append("text")
    .attr("class", "label")
    .style("fill-opacity", function(d) {
        return d.parent === root ? 1 : 0;
    })
    .style("display", function(d) {
        return d.parent === root ? null : "none";
    })
    .text(function(d) {
        return d.name;
    })
    .style("font-size", calculateTextFontSize)
    .attr("dy", ".35em");

var node = svg.selectAll("circle,text");

d3.select("body")
    .style("background", color(-1))
    .on("click", function() {
        zoom(root);
    });

zoomTo([root.x, root.y, root.r * 2 + margin]);

function zoom(d) {
    var focus0 = focus;
    focus = d;

    var transition = d3.transition()
        .duration(d3.event.altKey ? 7500 : 750)
        .tween("zoom", function(d) {
            var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
            return function(t) {
                zoomTo(i(t));
            };
        });

    transition.selectAll("text")
        .filter(function(d) {
            return d.parent === focus || this.style.display === "inline";
        })
        .style("fill-opacity", function(d) {
            return d.parent === focus ? 1 : 0;
        })
        .each("start", function(d) {
            if (d.parent === focus) this.style.display = "inline";
        })
        .each("end", function(d) {
            if (d.parent !== focus) this.style.display = "none";
        });
}

function zoomTo(v) {
    var k = diameter / v[2];
    view = v;
    node.attr("transform", function(d) {
        return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")";
    });
    circle.attr("r", function(d) {
        return d.r * k;
    });
}

d3.select(self.frameElement).style("height", diameter + "px");

点击“vis”圈中最大的子圈就说明了这个问题。

https://dl.dropboxusercontent.com/u/3040414/vis-circle.png

---

首先给圈子一个id，这里我给文本名称作为圈子ID，以便我可以通过文本名称链接文本和圈子。

var circle = svg.selectAll("circle")
  .data(nodes)
  .enter().append("circle")
  .attr("class", function(d) {
    return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root";
  })
  .style("fill", circleFill)
  .attr("r", function(d) {
    return d.r;
  })
  .attr("id", function(d) {
    return d.name;//setting text name as the ID
  })
  .on("click", function(d) {
    if (focus !== d) zoom(d), d3.event.stopPropagation();
  });

在完成zoom(d) function （即当您点击一个圆圈并缩放时）时，添加一个超时功能，该功能将根据缩放重新计算文本字体大小。

setTimeout(function() {
  d3.selectAll("text").filter(function(d) {
    return d.parent === focus || this.style.display === "inline";
  }).style("font-size", calculateTextFontSize);//calculate the font
}, 500)

您的calculateTextFontSize函数将如下所示（我正在使用真正的DOM半径来计算字体大小）：

var calculateTextFontSize = function(d) {
  var id = d3.select(this).text();
  var radius = 0;
  if (d.fontsize){
    //if fontsize is already calculated use that.
    return d.fontsize;
  }
  if (!d.computed ) {
    //if computed not present get & store the getComputedTextLength() of the text field
    d.computed = this.getComputedTextLength();
    if(d.computed != 0){
      //if computed is not 0 then get the visual radius of DOM
      var r = d3.selectAll("#" + id).attr("r");
      //if radius present in DOM use that
      if (r) {
        radius = r;
      }
      //calculate the font size and store it in object for future
      d.fontsize = (2 * radius - 8) / d.computed * 24 + "px";
      return d.fontsize;  
    }
  }
}

工作代码在这里

---

我也遇到了同样的问题，我尝试了这一个，它适用于我。

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

链接地址: http://www.djcxy.com/p/85567.html

上一篇: Zoomable Circle Packing with Automatic Text Sizing in D3.js

下一篇: Creating Zip and Force Downloading