Question

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

我尝试了什么：

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

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

Answer 1

我调整了宽度：

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

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

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

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

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

3 个答案: