为什么轴上的标签文本在D3.js中消失？

我想为我的y轴创建一个标签，并且显示它时出现问题。为什么轴上的标签文本在D3.js中消失？

SVG.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
    .append("text") 
     .attr("class", "label") 
     .attr("transform", "rotate(-90)") 
     .attr("x", 100) 
     .attr("y", 100) 
     .style("text-anchor", "end") 
     .text("Sepal Width (cm)");

当我使用上面的代码，我不能显示我的标签，但是当我删除

 .attr("transform", "rotate(-90)")

我可以看到我的文字。

这是为什么？

来源

2014-05-02 Vanquiza

没有这个解决您的问题？ – fasouto

是的，它的确如此，我非常忙碌，您的评论提醒我要将您的答案标记为最佳答案。谢谢。 – Vanquiza

没问题，谢谢！ :) – fasouto

这是因为rotate相对于原点旋转文字，所以文字不在画布上。你这里有两种选择：

使用翻译旋转

.attr("transform", "translate(100, 100) rotate(-90)")

前放置文本或添加可选的X和Y参数旋转（）

.attr("transform", "rotate(-90 100 100)")

来源

2014-05-02 22:44:50 fasouto

好的答案，@Vanquiza也可以尝试.attr（“transform”，“rotate（-5）”）或类似的小角度，以了解旋转如何在这样的代码的原点周围进行不幸！ – VividD

是的，按预期工作，非常感谢。 – Vanquiza

为什么轴上的标签文本在D3.js中消失？

回答

相关问题