3

次の D3 チャートがあります (入力として 12842311 を使用): http://www.uscfstats.com/deltas

チャートを読み込んだ後、グリッドボタンをクリックします（読み込み後のみ）。グリッドが表示されます。明らかな問題は、垂直線がチャートの上半分にしかないことです。

これは、私が知る限り、D3 では目盛りの先頭のオフセットのみを指定できるためです。これは私が行っている方法であり、終了オフセットを指定することはできません。また、複雑なことをしない限り、目盛りの位置がわからないため、目盛りで行う必要があると思います。

この制限を回避し、x 軸を横切る垂直線でグリッドを作成するにはどうすればよいですか? 難しいことではないようです。正しい方法でグリッドを作成しようとしていますか?

var xAxis = d3.svg.axis().orient("bottom").scale(x).ticks(15);

svg.append("g").attr("class","x axis").call(xAxis).attr("transform","translate(60, " + height + ")");
4

2 に答える 2

2

これを機能させる最も簡単な方法は、手動でtickマークのサイズを変更して変換することでした。

  svg.selectAll(".y line")
      .attr("x2", width);

  svg.selectAll(".x line")
      .attr("y2", height)
      .attr("transform", "translate(0," + (-y(0)) + ")");

http://jsfiddle.net/2y3er/2/で実際の例を見ることができます。

于 2012-10-17T02:45:51.363 に答える
0

2セットのティックSVG要素を作成できます。1つは正の方向に伸び、もう1つは負の方向に伸びます。

d3セットアップを変更して、別の軸を1つまたは2つ含めますが、今回は、変更したtickパラメーターをcallメソッドに含めます。

Dim xAxis = d3.svg.axis().scale(...).ticks(... // define your xAxis generator

Dim xAxisSVG = d3.selectAll(...)... // and your standared axis
        .call(xAxis);

Dim xPositiveTicks = d3.selectAll(...)... // positive grid lines
        .call(xAxis.tickSize(height));

Dim xNegativeTicks = d3.selecatAll(...)... // negative grid lines
        .call(xAxis.tickSize(-1 * height));

それはそれほど徹底的ではないことを私は知っていますが、その方法は過去に私にとってうまくいきました。

于 2012-10-16T21:36:55.940 に答える