10

次のフィドルで次の D3js ズームとパン機能を手伝ってもらえないかと思っていました: http://jsfiddle.net/moosejaw/nUF6X/5/

コードが (素晴らしいとは言えませんが) 単純であることを願っています。

染色体の全長ごとに染色体の全長を示すグラフがあります。目盛り値は、各染色体の個々の長さ (合計) です。目盛りは、染色体の名前になるようにフォーマットされています (エンドユーザーに見栄えを良くするため)。

私が抱えている問題は次のとおりです。

  1. x 軸と y 軸のラベルがグラフ領域の外に出ています。目盛りの値を明示的に指定しないと、ラベルが「消えて」しまいます。見る：

    var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickValues(tickValues)
.tickFormat(function(d) { 
    var ret = bpToChrMBP(d);
    return ret.chr;
});

  2. x 軸が最小値の前で左にパンしないようにするにはどうすればよいですか? また、最大値を超えて右にパンしませんか? これは、ズームインしているかどうかに関係なく発生します (上と下を除いて、y 軸についても同じです)。

  3. 目盛りの間に軸ラベルを「中央揃え」にする方法はありますか。目盛りは等間隔ではありません。小目盛りに細分割を使用してみましたが、目盛り間が正しく細分割されません。

どんな助けでも大歓迎です！

マット

4

2 に答える 2

7

このフィドルはあなたの問題のほとんどを解決します: http://jsfiddle.net/CtTkP/ 説明は以下の通りです:

  • グラフ領域を超えて拡張するという意味がわかりません。ラベルは の中にあるべきですchart-areaか? パンニング時にラベルが軸を超えて拡張することを意味する場合、問題はさらに 2 つの s を慎重に使用することで解決できますが、これは翻訳が提供するclip-path値の優雅なフェードを許可しません。svg.axis
var clipX = svg.append("clipPath")
      .attr('id', 'clip-x-axis')
      .append('rect')
      .attr('x', 0)
      .attr('y', 0)
      .attr('width', width)
      .attr('height', margin.bottom);

svg.append("g")
    .attr("class", "x axis")
    .attr('clip-path', 'url(#clip-x-axis)')
    .attr("transform", "translate(0, " + height + ")")
    .call(xAxis);

// ...

var clipY = svg.append("clipPath")
      .attr('id', 'clip-y-axis')
      .append('rect')
      .attr('x', - margin.left)
      .attr('y', 0)
      .attr('height', height)
      .attr('width', margin.left);

svg.append("g")
    .attr("class", "y axis")
    .attr('clip-path', 'url(#clip-y-axis)')
    .call(yAxis);
  • パンが値を超えないようにするには、手動でtranslateズームを制限する必要があります。
function zoomed() {

     var trans = zoom.translate(),
         scale = zoom.scale();

     tx = Math.min(0, Math.max(width * (1 - scale), trans[0]));
     ty = Math.min(0, Math.max(height * (1 - scale), trans[1]));

     zoom.translate([tx, ty]);

    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);

    // ...

これにより、グラフが制限を超えてパンすることはできなくなります。

  • を明示的にオーバーライドしているため、値を調整して中央に配置できますtickValues。
var tickValues2 = [];
tickValues.forEach(function (t, idx) {
    if (idx < tickValues.length - 1) {
        tickValues2.push((t + tickValues[idx + 1]) / 2);
    }
});

tickValues次に、 forxAxisとyAxisを使用する代わりに、 を使用しますtickValues2。

于 2013-05-26T11:28:57.820 に答える