D3パンズームオーバーフロー

Question

次のフィドルにfollwoing 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. 目盛りの間に軸ラベルを「センタリング」する方法はありますか？目盛りは均等に配置されていません。私は細かい目盛りの細分化を使ってみましたが、目盛りの間で細分化されません。

ご協力いただければ幸いです。

マット

Answer 1

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

• 私はあなたがグラフエリアを越えて延びるによって何を意味するのかわかりません。ラベルはであるべきですか？chart-area？

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

：あなたがパンの上に、ラベルが軸を超えていることを意味している場合、問題はこれがsvg.axis翻訳が提供する値の優雅なフェージングのために許可されていませんが、慎重にclip-pathの2以上を使用することによって解決することができます

• が値を越えて延びるからパンを防ぐには、手動ズームのため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); 
    } 
}); 

その後

の代わりに、xAxisとyAxisためtickValuesを使用して、tickValues2を使用しています。

Answer 2

1. は問題があなたのためにそれを行う代わりに、xとyのスケールをさせるのは、手動tickValuesを設定しているということです。それをコメントアウトしてみてください：// .tickValues(tickValues)

   var x = d3.scale.linear（）。rangeRound（[0、width]）。domain（d3.extent（tickValues））;

   VAR X軸= d3.svg.axis（） .scale（X） .orient（ "底部"） // .tickValues（tickValues） .tickFormat（関数（D）{ VAR RET = bpToChrMBP （d）; return ret.chr; }）;

tickValuesを明示的に設定できるようにするための迅速かつ厄介な修正は、各軸にclippingPathを定義することです。

make_x_axis機能も必要ありません（y軸と同じ）。あなたが再実装d3.behavior.zoom()する必要がありますカットオフを過ぎて左/右パン防ぐためにhttp://bl.ocks.org/ameliagreenhall/raw/d30a9ceb68f5b0fc903c/

1. ：このズーム可能な散布例をチェックしてください。今そこtranslateToを呼び出すmousemoveと呼ばれる機能があり、この機能は制限がありません：

   関数translateTo（P、L）{ L =点（L）を、 translate [0] + = p [0] - l [0]; translate [1] + = p [1] - l [1]; }

2. 軸を定義するときに、dxとdy属性で再生することができます。