Question

我有一个带有翻译位置的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/

Answer 1

一个问题是，您要追加<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(...)

这是一个jsfiddle，我为g.prac和g.presence进行了转化：http://jsfiddle.net/c6w7j/4/

我认为这会让你成为那里的一部分。我不确定该文本是否实际上落在您想要的位置，但这至少应该能够修复您的结构。

文本没有转换到正确的位置

1 个答案: