爲什麼軸上的標籤文本在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中消失？

回答

相關問題