Javascript 圆包装中的文本路径未正确缩放

我使用的是d3.js版本5和circle pack以及d3 arc generator。圆形包装和缩放代码是标准的，在许多地方都使用。当我尝试沿圆放置圆弧文本时，它工作正常，加载正常，但当我尝试放大或缩小时，文本/标签不会相应地沿圆边框放置。这是我的密码：

我尝试了中提到的“d3圆圈文本”插件，但没有成功，因为它使用的是旧版本的d3 plus放大功能与此不同

此外，我还想尝试一下这里实现的功能：但没有成功，因为再次从较旧的d3版本转换到较新的d3版本会使转换更加困难

这是我的密码：

测试
正文{
字体大小：11px；
}
text.parent{
填充物：1f77b4；
}
正文{
字体：10px无衬线；
}
/*.文本{
光标：指针；
}*/
文本：悬停{
/*颜色：#FF0000*/
字体大小：粗体；
行程：#000；
笔划宽度：0.5px；
文字装饰：下划线；
}
圈{
填充：#ccc；
行程：#999；
指针事件：全部；
光标：指针；
不透明度：0.55；
}
圈父{
填充物：1f77b4；
填充不透明度：.1；
笔画：钢蓝；
}
圆圈。父：悬停{
行程：#ff7f0e；
笔划宽度：.5px；
}
/*圈，孩子{
指针事件：无；
}*/
/*节点悬停*/
/*.节点{
光标：指针；
}
.节点：悬停{
行程：#000；
笔划宽度：1.5px；
}
.node—叶{
填充物：白色；
}
*/
/*圈出文本*/
.标签{
字体：11px“Helvetica Neue”，Helvetica，Arial，无衬线；
文本锚定：中间；
文本阴影：01px0#fff，1px0#fff，-1px0#fff，0-1px0#fff；
}
.标签，
.node—根，
.node—叶{
指针事件：无；
}
.弧形路径{
可见性：隐藏；
}

下面是javaScript代码：

var svg, margin, diameter, g, pack, focus, view, circle, node;
var maxNumLevels = 3;

document.addEventListener("DOMContentLoaded", function (e) {

    svg = d3.select("svg"),
        margin = 20,
        diameter = +svg.attr("width");
        g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

    pack = d3.pack()
        .size([diameter - margin, diameter - margin])
        .padding(2);

    initialSpecialCase();
});

function generateLevels(pivotLevel) {
    pivNum = parseInt(pivotLevel.match(/VirusL(\d+)_s/)[1]);
    var r  = '';
  for (var n = 0; n <= maxNumLevels; ++n) {
    if(n!=0) {
        r += ","; 
    }
    r += "VirusL" + (pivNum + n) + "_s";
    }
    curLevelsStr = r;
  return r;
}

function extractTaxIdFromName(nameTaxId) {
    var idx = nameTaxId.lastIndexOf(", taxid:");
    if(idx != -1) {
        return nameTaxId.substring(idx + 8);
    }
    return '';
}

function initialSpecialCase() {
    var data1 = {};
    d3.json("https://api.myjson.com/bins/1h5co8").then(function(dta) {
        console.info("Data from ajax: ", dta);
        data1 = {
            'name'  : 'root',
            'field' : '',
        'value' : dta.response.numFound,
        'pivot' : dta['facet_counts']['facet_pivot'][generateLevels('VirusL0_s')]
        };
        createCircles(data1);
    });
}

function mapData(d) {
    if (!d.hasOwnProperty('pivot'))
      return;

  d.hasChildren = true;

  var maxPivName = "VirusL" + (pivNum + maxNumLevels - 1).toString() + "_s";
  if (d.field === maxPivName)
      return;

  var cnodes = d.pivot;
  for (c in cnodes) {
      if (!cnodes[c].hasOwnProperty('name')) {
          cnodes[c].name = cnodes[c].value;
          cnodes[c].value = cnodes[c].count;
      }
  }
  return cnodes;
}

function arcSVG(mx0, my0, r, larc, sweep, mx1, my1) {
  return 'M'+mx0+','+my0+' A'+r+','+r+' 0 '+larc+','+sweep+' '+mx1+','+my1;
}

function createCircles(data) {

    var root = d3.hierarchy(data, mapData)
        .sort(function(a, b) { return b.value - a.value; });
    console.info(root);

    focus = root;
  var nodes = pack(root).descendants();

  var nodeg = g.selectAll(".node")
        .data(nodes)
        .enter().append("g")
        .attr("class", function(d) {
            return d.children ? "node" : "leaf node"; 
        })
       ;

  nodeg.append("circle")
    .attr("class", function(d) { return d.children ? "parent" : "child"; })
    .attr("id", function(d) { return 'c' + extractTaxIdFromName(d.data.name); })
    .on("click", function(d) { 
      selectedVirus = d.data.name;
      if (!d.children && d.parent) {
        zoom(d); d3.event.stopPropagation();
      }
      else if (focus !== d) { 
        zoom(d); 
        d3.event.stopPropagation(); 
      } 
    });

    nodeg.append("title")
        .text(function(d) {
            return d.data.name;
        });

    nodeg.each(function(d, i) {
        var gg = d3.select(this);
        if(d.depth === 3) {
//          gg.append('text')
//                  .style('font-size', d3.min([3 * d.r / d.data.name.length, 16]))
//                  .attr('dy', '0.3em')
//                  .text(d.data.name);
        }
        else if(d.depth > 0) {
                var rr = d.r - 5;
                gg.append('path')           
            .attr('d', arcSVG(-rr, 0, rr, 1, 1, rr, 0))
            .attr('id', 'label-path-' + i)
            .style('fill', 'none')
            .style('stroke', 'none');

           gg.append('text')
            .append('textPath')
            .attr('xlink:href', '#label-path-' + i)
            .attr('startOffset', '50%')
            .style("text-anchor","middle")
            .style('font-size', '10px')
            .style('fill', 'black')
            .text(d.data.name);
            }
    });


  node = nodeg.selectAll("circle,text");
  circle = nodeg.selectAll("circle");

  svg
      .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; })
      .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
      .on("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; });
}

var svg、边距、直径、g、包、焦点、视图、圆、节点；
var MaxNumLevel=3；
document.addEventListener（“DOMContentLoaded”，函数（e）{
svg=d3。选择（“svg”），
保证金=20，
直径=+svg.attr（“宽度”）；
g=svg.append（“g”）.attr（“转换”、“转换”（+diameter/2+），“+diameter/2+”）；
pack=d3.pack（）
.尺寸（[直径-边距，直径-边距]）
.填充（2）；
initialSpecialCase（）；
});
函数生成器级别（数据透视级别）{
pivNum=parseInt（pivotLevel.match（/VirusL（\d+）\u s/）[1]）；
var r=''；
对于（变量n=0；n 0）{
var-rr=d.r-5；
append（'path'）
.attr（'d'，arcSVG（-rr，0，rr，1，1，rr，0））
.attr（'id'，'label path-'+i）
.style（'填充'，'无'）
.style（'stroke'，'none'）；
gg.append（'text'）
.append（'textPath'）
.attr（'xlink:href'，'#标签路径-'+i）
.attr（'startOffset'，'50%”）
.style（“文本锚定”、“中间”）
.style（'font-size'，'10px'）
.style（'填充'，'黑色'）
.文本（d.数据.名称）；
}
});
node=nodeg.selectAll（“圆圈，文本”）；
圆圈=节点。选择全部（“圆圈”）；
svg
.on（“单击”，函数（）{
缩放（根）；
});
zoomTo（[root.x，root.y，root.r*2+margin]）；
}
功能缩放（d）{
var focus0=焦点；焦点=d；
var transition=d3.transition（）
.持续时间（d3.event.altKey？7500:750）
.tween（“缩放”，功能（d）{
var i=d3.interpolateZoom（视图，[focus.x，focus.y，focus.r*2+边距]；
返回函数（t）{zoomTo（i（t））；}；
});
转换。选择全部（“文本”）
.filter（函数（d）{return d.parent==focus | | this.style.display===“inline”}）
.style（“填充不透明度”，函数（d）{return d.parent==focus？1:0；}）
.on（“开始”，函数（d）{if（d.parent==focus）this.style.display=“inline”}）
.on（“end”，函数（d）{if（d.parent！==focus）this.style.display=“none”；}）；
}
函数zoomTo（v）{
变量k=直径/v[2]；视图=v；
attr（“transform”，函数（d）{return”translate（“+（d.x-v[0]）*k+”，“+（d.y-v[1]）*k+”）；）；
circle.attr（“r”，函数（d）{返回d.r*k；}）；
}

谢谢你的帮助

---

谢谢。

您没有在缩放功能中选择

的路径。可以这样做：

svg.selectAll("path")
    .attr('d', function(d){
        return arcSVG(-(d.r - 5) * k, 0, (d.r - 5) * k, 1, 1, (d.r - 5) * k, 0)
    });

当然，更好的方法是命名您的选择，并改进新的

d

属性。另外，请注意创建全局对象（如

圆圈

和

节点

），以便在缩放功能中使用它们。最后，设置textpaths的

display

属性的逻辑无法正常工作

---

这是分叉代码笔：

谢谢分享更新。您的解决方案有效，但它不适用于小圆（位于大圆的右侧）。如果你点击那个小圆圈“Viroids，taxid:12884”，内部缩放圆圈的弧线文本不会像大圆圈和内部子圆圈那样与圆圈的上边框正确对齐。可能是我做错了什么？好吧，我的回答只是一个一般性的指导，你必须检查这些路径的

d

属性的数学，并相应地更改它。。。如果您仍然有问题，请随意写另一个问题，具体到t

svg.selectAll("path")
    .attr('d', function(d){
        return arcSVG(-(d.r - 5) * k, 0, (d.r - 5) * k, 1, 1, (d.r - 5) * k, 0)
    });