2017-12-08 55 views
1

thisとしたいと思います。d3.jsグラフのスケーリングを修正する方法

しかし、私がズームすると、その行は領域外です。

ラインの定義:

var valueline_1 = d3.line() 
    .x(function (d) { return x_1(parseDate(d.date)); }) 
    .y(function (d) { return y_1(d.count); }); 

var valueline2_1 = d3.line() 
    .x(function (d) { return x2_1(parseDate(d.date)); }) 
    .y(function (d) { return y2_1(d.count); }); 

してから、このコード:

focus_1.append("path") 
    .data([data]) 
    .attr("class", "line") 
    .attr("d", valueline_1(i)); 

context_1.append("path") 
    .data([data]) 
    .attr("class", "line") 
    .attr("d", valueline2_1); 

enter image description here は、あなたがそれを修正する方法を助けることができますか?

thx。

EDIT: ズームのためのこのコード:

var zoom_0 = d3.zoom() 
    .scaleExtent([1, Infinity]) 
    .translateExtent([[0, 0], [width_0, height_0]]) 
    .extent([[0, 0], [width_0, height_0]]) 
    .on("zoom", zoomed_0); 

function zoomed_0() { 
    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush" 
    ) return; // ignore zoom-by-brush 
    var t = d3.event.transform; 
    x_0.domain(t.rescaleX(x2_0).domain()); 
    focus_0.select(".area").attr("d", area_0); 
    focus_0.select(".line").attr("d", valueline_0); 
    focus_0.select(".axis--x").call(xAxis_0); 
    context_0.select(".brush").call(brush_0.move, x_0.range().map(t.invertX, t)); 
} 

私はページ上で複数のグラフを持っています。 1から5まで - この目的のために私は_{number}

+1

は「ズーム」前夜のコードを表示ntハンドラ。 –

答えて

1

あなたがclip-pathスタイルを適用しなかったように見えます。あなたはdefs要素とdefsの子としてclipPath要素を追加

enter image description here

チェック:あなたはそれがあなたの画面のようになります言及したブロックでこのスタイルをオフにした場合、(下のデモGIFを参照)

svg.append("defs").append("clipPath") 
    .attr("id", "clip") 
    .append("rect") 
    .attr("width", width) 
    .attr("height", height); 

また、あなたはこのスタイルを持っていることを確認してください。

.line { // <== this class name should be on your line/area 
    clip-path: url(#clip); // <== !!! 
} 
+0

ありがとうございますが、これは最初のチャートのみに役立ちます。私は自分のページに5つのチャートをそれぞれ別々のタブで持っています。他の人にとっては問題は持続する。 clip-patsが有効になっています。何か案が? –

+0

@TomášChičmanすべてのグラフに一意のIDを設定してください。たとえば、最初のグラフでは、2番目の 'clip2'の' clip1'にする必要があります。これに応じてスタイルを変更してください。 –

+0

私は同じアイデアを持っていますが、遅すぎる:D助けてくれてありがとう –

関連する問題