3

svg右軸と左軸の両方を持つグラフを作成しています。右軸と左軸の両方を持つグラフを作成しました。ただし、右軸が切れています。私のフィドルを参照してください

私が試したこと：

  1. .background と .plot の幅を広くしたり狭くしたりしてみました
  2. 軸ラベルの z-index を 9999 に設定してみました
  3. .background の幅と高さを 90% に設定して、svg を拡大しようとしました
  4. テキスト ラベルを左に移動しようとしましたが、プロット エリアににじみ始めます。
  5. .background のオーバーフローを可視に設定しようとしました

私はアイデアがありません。何か案は？

4

3 に答える 3

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して、出血している背景をカバーしました..

于 2013-02-28T02:12:52.343 に答える
0

幅を に強制しています。900幅を に設定する1000と、問題を解決できます。

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

ただし、幅を 1000 にwidth="900"設定することもできviewBoxます。これにより、チャートは SVG のサイズに合わせてスケーリングされます。

<svg ... width="900" viewBox="0 0 1000 300">
于 2013-02-28T02:37:07.870 に答える
0

マージンを使用してこれを解決しました：

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-13T16:35:10.657 に答える