ज़ूम प्रभाव

Question

बनाने के लिए d3 का उपयोग करके घुमावदार लाइनों पर ब्रश this plnkr पर काम कर रहा हूं। मेरे पास 30, 45 और 60 कोण पर तीन पंक्तियां हैं। मैं इन पंक्तियों पर एक ब्रश लागू करना चाहता हूं ताकि जब चार्ट ब्रश किया जाए तो लाइनों को फिर से खींचा जाए जहां यह अक्ष पर मूल्यों के साथ ब्रश आयत को पार कर गया था। इस समस्या को हल करने के लिए कोई मदद या संकेत बहुत सराहना की है।

संपादित करें: यदि आपके पास घुमावदार रेखाएं और ब्रश को आकर्षित करने के लिए अलग-अलग समाधान हैं तो इसका स्वागत भी किया जाता है। कृपया मदद करे।

var ga = d3.select("svg") 
    .append("g") 
    .attr("class", "a axis") 
    .attr("transform", "translate(" + margin.left + "," + (height + margin.top) + ")") 
    .selectAll("g") 
    .data([30, 45, 60]) 
    .enter() 
    .append("g") 
    .attr("class", "rotatedlines") 
    .attr("transform", function(d) { return "rotate(" + -d + ")"; }) 
    .attr("stroke-width", 1) 
    .attr("stroke", "black") 
    .attr("stroke-dasharray", "5,5"); 

Answer 1

मेरी समाधान व्याख्या करने के लिए:

• अद्यतन के डोमेन:

  मौलिक लेने के लिए कदम इस प्रकार हैं ब्रश सीमा के लिए एक्स और वाई स्केल

• धुरी को दोबारा हटाएं
• स्केल कारक और अनुवाद की गणना करें लाइनों
• पैमाने के लिए व्यावहारिक और लाइन कंटेनर का अनुवाद तदनुसार
• ब्रश रीसेट

ध्यान दें कि 3 चरणों और क्योंकि आप तराजू उपयोग नहीं कर रहे सब कुछ आकर्षित करने के लिए 4 केवल आवश्यक हैं - एक बेहतर दृष्टिकोण प्रत्येक पंक्ति के लिए दो बिंदुओं को परिभाषित करना होगा क्योंकि तत्वों के लिए बाध्य डेटा और फिर स्केल को फिर से निकालने के लिए उपयोग करें। यह कोड को सरल बना देगा।

आपके दृष्टिकोण के साथ यह अभी भी संभव है। इसे सुविधाजनक बनाने के लिए, मैंने आपके कोड में कुछ संशोधन किए हैं - विशेष रूप से, मैंने अलग-अलग अनुवादों के साथ विभिन्न नेस्टेड g तत्वों को साफ़ कर लिया है और लाइनों को उनके x1, x2, y1, y2 गुणों के माध्यम से परिभाषित किया है कंटेनरों के अनुवाद के माध्यम से। इन दोनों परिवर्तनों में वह कार्यक्षमता है जिसे आप कार्यान्वित करना चाहते हैं क्योंकि केवल एक ही परिवर्तन उन स्थानों को लेता है जिन्हें कई अन्य परिवर्तनों पर विचार करने की आवश्यकता नहीं होती है। मैंने कई g तत्वों में लाइनों को भी घोंसला दिया है ताकि उन्हें स्केल किया जा सके और अधिक आसानी से अनुवाद किया जा सके।

ब्रश हैंडलर समारोह अब इस तरह दिखता है:

// update scales, redraw axes 
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] ]); 
xAxisG.call(xAxis); 
yAxisG.call(yAxis); 

इस कोड को काफी आत्म व्याख्यात्मक होना चाहिए - तराजू के डोमेन ब्रश की वर्तमान हद के अनुसार अपडेट किया जाता है और कुल्हाड़ियों दोबारा बनाई कर रहे हैं ।

// compute and apply scaling and transformation of the g elements containing the lines 
var sx = (x2.domain()[1] - x2.domain()[0])/(x.domain()[1] - x.domain()[0]), 
    sy = (y2.domain()[1] - y2.domain()[0])/(y.domain()[1] - y.domain()[0]), 
    dx = -x2(x.domain()[0]) - x2.range()[0], 
    dy = -y2(y.domain()[1]) - y2.range()[1]; 
d3.selectAll("g.container") 
    .attr("transform", "translate(" + [sx * dx, sy * dy] + ")scale(" + [sx, sy] + ")"); 

यह मुश्किल हिस्सा है - तराजू के नए डोमेन के आधार पर, हम लाइनों के लिए पैमाने पर और अनुवाद गणना करने के लिए की जरूरत है। स्केलिंग कारक केवल पुरानी सीमा का अनुपात नई सीमा तक हैं (ध्यान दें कि मैंने उन तराजू की प्रतियां बनाई हैं जो संशोधित नहीं हैं), यानी 1 से अधिक संख्या। अनुवाद (0,0) की शिफ्ट निर्धारित करता है पुराने (0,0) समन्वय के अंतर के माध्यम से समन्वय और गणना की जाती है (मुझे मूल स्केल की सीमा से यह मिलता है) और मूल स्केल के अनुसार नए डोमेन मूल की स्थिति।

एक ही समय में अनुवाद और स्केल लागू करते समय, हमें स्केलिंग कारकों के साथ ऑफ़सेट को गुणा करने की आवश्यकता है।

// reset brush 
brush.clear(); 
d3.select(".brush").call(brush); 

अंत में, हम ब्रश को साफ़ करते हैं और भूरे रंग के आयत से छुटकारा पाने के लिए इसे रीसेट करते हैं।

पूर्ण डेमो here।

Answer 2

आप d3.event.target.extent() के माध्यम से ब्रश हद तक पहुँच सकते हैं।

• सेट पैमाने
• सेट अक्ष
• ड्रा अक्ष

जैसे ही ब्रश किया जाता है, आप पैमाने संशोधित करने के लिए और फिर पुन: पैमाने बैठक के लिए प्रवाह यह है वर्तमान x और y डोमेन के अनुसार अक्ष को खीचें। क्या आपका आशय यही था?

मैं थोड़ा कोड साफ और एक छोटे से प्रदर्शन किया: http://plnkr.co/edit/epKbXbcBR2MiwUOMlU5A?p=preview