我的右軸被切斷了......我該如何糾正它？

我正在用左右軸創建svg圖表。我創建了一個右軸和左軸的圖表。但是，右軸正在切斷。見my fiddle 我的右軸被切斷了......我該如何糾正它？

我已經試過：

我試圖調節裝置技術領域的寬度和.plot到較寬和較窄
我試圖設置的的z索引軸標籤9999
我試圖通過將.background的寬度和高度設置爲90％來放大svg
我試着將文本標籤移動到左側，但隨後它開始滲入到地塊面積
我已經嘗試設置溢出的.background到可見

我不知道。有任何想法嗎？

2013-02-28 Marissa Levy

我調整的寬度：

<g class="graph line-graph vertical"> 
<rect y="0" x="0" width="1000" height="301" class="background"/>

我從900改變寬度和高度增加的1像素覆蓋BG ..

來源

2013-02-28 02:12:52 Adrift

thx，但我不認爲這是最佳解決方案。更改背景顏色顯示標籤軸出血的缺陷：http://jsfiddle.net/eWx4D/3/ – 2013-02-28 04:02:22

你是出血強制寬度爲900，您可以將寬度設置爲1000並解決問題。

<svg ... width="900" viewBox="0 0 900 300">

但是，如果你想保持width="900"您還可以設置viewBox寬度1000和您的圖表將被縮小到SVG的大小。

<svg ... width="900" viewBox="0 0 1000 300">

來源

2013-02-28 02:37:07

謝謝，但我不相信這些都是「最佳」。將svg的背景顏色更改爲紅色顯示缺陷（軸標籤出血）：http://jsfiddle.net/eWx4D/3/ – 2013-02-28 04:03:13

我解決了這個使用邊距：

var plotWidth = 1000; 
var plotHeight = 600; 

var margin = {top: 20, right: 40, bottom: 30, left: 40}, 
    width = plotWidth - margin.left - margin.right, 
    height = plotHeight - margin.top - margin.bottom; 

var x = d3.scale.linear().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 
// etc. 

svg = d3.select("#mydiv").append("svg") 
.attr("width", width + margin.left + margin.right) 
.attr("height", height + margin.top + margin.bottom) 
.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

對我來說更容易考慮，並根據需要調整。

來源

2013-08-13 16:35:10

我的右軸被切斷了......我該如何糾正它？

回答

相關問題