如何在nvd3圖表中旋轉到Y軸標籤

我在nvd3中有一個多圖表。我需要旋轉yAxis1和yAxis2的y軸標籤。但我看到沒有好的選擇來旋轉y軸標籤。旋轉xAxis標籤非常簡單。只是uisng rotateLabels: 45適用於xAxis。但對於y軸的這種解決方案不幹活試圖用內部yAxis:{}的rotateLabels如下：如何在nvd3圖表中旋轉到Y軸標籤

rotateLabels: 45

它爲x軸。但它不適用於y軸。我使用像

css:{'transform':'rotate(45)'}

CSS命令也試過，但沒有什麼工作都沒有。我不能想到任何其他解決方案。

任何人都有我的想法我怎麼能在nvd3圖表中的y軸標籤？在此先感謝

來源

2016-12-22 Programming is Fun

根據nvd3的文檔rotateLabels僅適用於X軸。嘗試CSS屬性'css：{'transform'：'rotate（45deg）'}' – sandyJoshi

它也不起作用 –

您不能像這樣從圖表選項中旋轉y軸標籤。您可以通過在庫中稍作修改來完成此操作。轉至nvd3.js代碼。並找到開關組

switch (axis.orient()) {}

而這個塊中，你會發現

case 'top': 
case 'bottom': 
case 'right': 
case 'left':

這裏case 'left'和case 'right'是y軸。所以還是這些案件中，發現：

axisLabel .style('text-anchor', rotateYLabel ? 'middle' : 'begin') .attr('transform', rotateYLabel ? 'rotate(90)' : '') 現在不是rotate(90)把rotate(45)和你都設置。如果你想改變其他的y軸屬性，你也可以改變這些大小寫塊。

但是，如果你仍然想從前面修改結束，您可以選擇使用D3的DOM元素一樣

d3.select(".nv-y2").select(".nvd3").select("text").attr("transform","rotate(45)");

上述策略應該工作中的任何一個。

來源

2016-12-23 03:51:23

如何在nvd3圖表中旋轉到Y軸標籤

回答

相關問題