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

【问题标题】：My right axis is cut off...how do I correct it?我的右轴被切断了......我该如何纠正它？
【发布时间】：2013-02-28 02:07:39
【问题描述】：

我正在创建一个带有左右轴的svg 图表。我创建了一个带有右轴和左轴的图表。但是，右轴正在被切断。见my fiddle

我尝试过的：

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

我没有想法。有什么想法吗？

【问题讨论】：

标签： javascript css svg charts d3.js

【解决方案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 像素的高度以覆盖出血背景..

【讨论】：

谢谢，但我不认为这是最佳解决方案。更改背景颜色显示标签轴流血时的缺陷：jsfiddle.net/eWx4D/3

【解决方案2】：

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

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

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

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

【讨论】：

谢谢，但我不相信这些都是“最佳的”。将 svg 的背景颜色更改为红色显示了缺陷（轴标签流血）：jsfiddle.net/eWx4D/3

【解决方案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 + ")");

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

【讨论】：