javascript - 文字未转换到正确位置

我有一个json数据，其中包含翻译位置，然后将数据与质心一起返回，并创建了函数。当我运行此代码时，文本沿底部沿直线延伸：

var prac = svg.append("g.prac")
            .data(inner)
            .enter()
            .append("g")
            .attr("transform", function(d,i){return "translate ("+ arc[i].centroid() +")" + d.trans;});

        prac.append("text")
            .style("font", "bold 12px Arial")
           .text(function(d) {return d.text;})
        ;

我也尝试过附加（svg：text）而不是对其进行分组，但是它只是没有出现。

谁能帮我解决我的问题？ ...我附上了一个示例，使我的问题更加清楚：http://jsfiddle.net/xwZjN/48/

最佳答案

一个问题是您要添加<g.prac>元素而不是<g class='prac'>元素。要解决此问题，请切换如下代码：

svg.append("g.prac")

有了这个：

svg.append("g").attr("class", "prac")

其次，更关键的是，您需要选择要绑定数据的元素-即使尚未创建（Scott Murray具有a nice explanation of this）。因此，您的prac应如下所示：

svg.append("g")
    .attr("class", "prac")
  .selectAll("g")
    .data(inner)
    .enter()
    .append("g")
    .attr(...)

这是我为g.prac和g.presence进行转换的jsfiddle：http://jsfiddle.net/c6w7j/4/

我认为那可以帮助您实现目标。我不确定该文本实际上是否会落在您想要的位置，但这至少应该可以修复您的结构。