javascript - 我的右轴被切断了......我该如何纠正它？

Question

我正在创建一个svg带有左右轴的图表。我创建了一个带有右轴和左轴的图表。但是，右轴正在被切断。看我的小提琴

我试过的：

1. 我尝试将 .background 和 .plot 的宽度调整为更宽更窄
2. 我尝试将轴标签的 z-index 设置为 9999
3. 我试图通过将 .background 的宽度和高度设置为 90% 来放大 svg
4. 我尝试将文本标签向左移动，但随后它开始渗入绘图区域
5. 我尝试将 .background 的溢出设置为可见

我没主意了。有任何想法吗？

Answer 1

编辑小提琴：http: //jsfiddle.net/eWx4D/5/

我调整了宽度：

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

我更改了宽度900并添加1了高度像素以覆盖出血背景..

Answer 2

您将宽度强制设置为900，您可以将宽度设置为1000并解决您的问题。

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

但是如果你想保留它，width="900"你也可以将viewBox宽度设置为 1000，你的图表将被缩放到 svg 的大小。

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

Answer 3

我通过使用边距解决了这个问题：

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 + ")");

对我来说，它更容易思考，并根据需要进行调整。