選択したデータに基づいてY軸の範囲を変更します

Question

D3でチャートを作成しました。それは動作しますが、私は軸スケーリングの能力を追加したいと思います。

私は、全く異なる範囲を持ついくつかのデータセットを持っています。 私はY軸の範囲を選択されたシリーズに従って変更したいと思います。

これは全体のコードである：リンクされた例では、4シリーズを持っている現時点ではhttps://plnkr.co/edit/89ERO3GuxREvYQ3DRX5L?p=preview

：私は、例えば、ユーザが「キウイ」と「アップル」を選択した場合、次にY軸が範囲たことを希望[0 -1]ではなく[0-15]（またはそのようなもの）でなければなりません。 重要なことは、選択したデータに応じて範囲が変更されることです。

私が意味する例は、http://bl.ocks.org/andrewleith/3824854です。

これを行うには、不透明度が0.5または1（可視線）のタグを配列に保存してから、ドメインYを変更すると思います。 私は配列を作成しましたが、このように（簡略化のため）不透明度0.5とタグ：

var actives = new Array(); 
var activeElem = d3.select(".line").attr("opacity", 0.5); 
console.log(activeElem); 

又は

var actives = new Array(); 
var activeElem = d3.selection.style({opacity: "0.5"}); 
console.log(activeElem); 

又は

var actives = new Array(); 
var activeElem = d3.selectAll("path[opacity='0.5']"); 
console.log(activeElem); 

これらの作品はありません。 私も他のテストをしましたが、何が覚えておらず、まだ動作しませんでした。 私は狂ってしまいます。

不透明度0.5と1の項目を選択し、選択したデータに基づいてY軸を変更する正しい方法は何ですか？

は、ここでの主な問題は、あなたが最小とあなたのデータの最大値の別の計算を行い、その後最小値と最大値で新しいドメインを使用してy軸を更新する必要があるということです

Answer 1

こんにちは、ありがとうございました。

// find the new max value of the selected series 
var max = d3.max(filteredData, function(d) { 
    return d3.max(d.values, function(e) { 
     return e.value; 
    }); 
}); 
// find the new min value of the selected series 
var min = d3.min(filteredData, function(d) { 
    return d3.min(d.values, function(e) { 
     return e.value; 
    }); 
}); 
// set the new y domain 
y.domain([min, max]); 
// update our new y axis with the new domain 
svg.selectAll("g .y.axis").transition() 
    .duration(800).call(yAxis); 

あなたは私はあなたが現在の選択（詳細here）とのデータの指定された配列に参加することができますdata機能を使用することをお勧め特定の行を選択してデータをフィルタしたいので。あなたd3ユーティリティを使用することができるときに巨大なforEachループを作っている。行で何か：

私はより多くの文書駆動型のアプローチを使用するようにコードを修正

// apend a group element which will contain our lines 
svg.append('g') 
    .attr('class', 'line-container') 
    .selectAll('.normal-line-paths') 
    .data(dataNest) // set our data 
    .enter() // enter the data and start appending elements 
    .append('path') 
    .call(path); // calling our path function for later use when appending lines 

、あなたはラベルとy軸上でクリックすることができ、濾過データセットの新しい最小値と最大値をtに応じて拡大されます。私はダッシュしたグループを空白のままにして、残りの部分を試してコードし、データ結合の背後にあるロジックを理解できるようにしました。

https://plnkr.co/edit/Wso0Gu4yHkdsHhl8NY8I?p=preview

編集：ここでは

は破線でplnkr :)

https://plnkr.co/edit/yHGGtrLXZyyq0KpiVWYf?p=preview