暴晒中的D3.JS <tspan>旋转

时间:2016-12-07 14:49:46

标签: d3.js svg text rotation tspan

我正在从example构建我自己的旭日形图 将多行标题添加为

for(i = 0; i < MAX_LINES; i++){

 var text = g.append("text")
.attr("transform", function(d) { return "translate(" + getCentroid(d) + ")rotate(" + textRotation(d) + ")"; })
.attr('text-anchor', function (d) { return textRotation(d) > 180 ? "end" : "start"; })
.attr("dx", "0") 
.attr("dy", "0em")
.attr("class", function(d) { return setStyle(d); })
.style("fill", function(d) { return setColor(d); }) 
.style("text-anchor", "middle")
.append("tspan")
.attr("dy", function(d) { return getDY(d, i); } )
.text(function(d) { return getLine(d, i); });
//.text(function(d) { return d.name; });

}

这在初始状态下非常好,但是当你的时候 通过单击某个分区来缩放它,一切都变成了 乱。该脚本仅移动第一行元素而不移动 隐藏其他元素不应该在屏幕上。

.duration(500)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
if (e.x >= d.x && e.x < (d.x + d.dx)) {

var arcText = d3.select(this.parentNode).select("text");

arcText.transition().duration(750)
.attr("opacity", 1)
.attr("transform", function(d) { return "translate(" + getCentroid(d) + ")rotate(" + textRotation(d) + ")"; })
.attr('text-anchor', "middle")


}
});
}
});

我如何为每个分区进行转换? 我试图通过“tspan”或其样式类进行选择。

是否可以通过重新分配名称来完全更新块 并重新创建

0 个答案:

没有答案