ब्रश किए गए क्षेत्र चार्ट के वाई-अक्ष को अद्यतन करें

Question

मैं d3.js का उपयोग कर रहा हूं, और मैं this example संशोधित करके ब्रश क्षेत्र चार्ट पर काम कर रहा हूं। ब्रश के आधार पर एक्स-अक्ष बदलते हुए, मैं ब्रश के भीतर आने वाले डेटा के वाई-मानों के आधार पर चार्ट की वाई-अक्ष को फिर से खींचा जाना चाहूंगा (a Google Finance chart के व्यवहार के समान)।

मुझे कार्यक्षमता मिल रही है, लेकिन केवल उसी तरह से ब्रश को एक्स- और वाई-स्पेस दोनों में खींचा जा सकता है। मैं पहली बार brush चर करने के लिए एक y पैमाने जोड़कर ऐसा किया: [ [x0, y0], [x1, y1] ]:

var brush = d3.svg.brush() 
    .x(x2) 
    .y(y2) 
    .on("brush", brush); 

यह brush.extent() वापसी निम्नलिखित बहुआयामी सरणी में आता है। मैं तो brush() समारोह में इस डेटा का उपयोग x और फोकस चार्ट के लिए y- डोमेन फिर से परिभाषित करने:

function brush() { 
    var extent = brush.extent(); 
    x.domain(brush.empty() ? x2.domain() : [ extent[0][0], extent[1][0] ]); 
    y.domain(brush.empty() ? y2.domain() : [ extent[0][1], extent[1][1] ]); 
    focus.select("path").attr("d", area); 
    focus.select(".x.axis").call(xAxis); 
    focus.select(".y.axis").call(yAxis); 
} 

यह काम करता है, लेकिन ब्रश चर में y पैमाने को परिभाषित करते हुए, उपयोगकर्ता कर सकते हैं अब खींचें ' मूल चार्ट में, केवल पश्चिम से पूर्व खींचने में सक्षम होने के बजाय फोकस चार्ट में बॉक्स '।

अनिवार्य रूप से, मेरा प्रश्न है: ब्रश के क्षेत्र की सीमा के बजाय ब्रश के क्षेत्र में आने वाले मूल्यों की सीमा कैसे प्राप्त करें? क्या यह भी संभव है?

डी 3 के ब्रश प्रलेखन here है।

Answer 1

मैं एक समाधान के साथ आया था।

मैंने ब्रश फ़िल्टर किए गए x.domain का उपयोग अपने मूल डेटा सेट को फ़िल्टर करने के लिए किया था। यह नया फ़िल्टर किए गए डेटा सेट केवल मानों ब्रश में आते हैं:

// Use x.domain to filter the data, then find the max and min duration of this new set, then set y.domain to that 
    x.domain(brush.empty() ? x2.domain() : brush.extent()); 
    var dataFiltered = data.filter(function(d, i) { 
    if ((d.date >= x.domain()[0]) && (d.date <= x.domain()[1])) { 
     return d.duration; 
    } 
    }) 
    y.domain([0, d3.max(dataFiltered.map(function(d) { return d.duration; }))]); 

अंत में, y- अक्ष पुनः बनाने का x- अक्ष के साथ ही सुनिश्चित हो: एक संक्षिप्त संभावना

focus.select("path").attr("d", area); 
focus.select(".x.axis").call(xAxis); 
focus.select(".y.axis").call(yAxis); 

Answer 2

,

var domainExtent = brush.extent().map(function(d){return scale.invert(d);}); 
var filteredData = data.filter(function(d){return ((d <= domainExtent[1]) && (d >= domainExtent[0]));}); 

हालांकि द्वारा अब d3प्राप्त की है: तो की तरह अपने brush.extent() पर d3.scale.invert() उपयोग करने के लिए किया जाएगा, जो केवल डिजाइन द्वारा पूर्व/पश्चिम दिशा में ब्रश करने की अनुमति देता है।