क्या माउस पॉइंटर का पालन करने वाले दिशानिर्देश की कमी को कम करने का कोई तरीका है?

Question

मेरे पास मेरे एसवीजी में एक लंबवत दिशानिर्देश है जो माउस पॉइंटर का पालन करता है, लेकिन अभी यह अपनी स्थिति को अपडेट करने में धीमा है, जो कुछ तेजी से माउस आंदोलनों के साथ ध्यान देने योग्य है। क्या इस अंतराल को कम करने का कोई तरीका है?

वर्तमान कोड:

svg.on("mousemove", function(d) { 
    svg.select(".guideline") 
     .attr("x1", d3.mouse(this)[0]-1) 
     .attr("x2", d3.mouse(this)[0]-1); 

}); 

svg.on("mouseover", function(d) { 
    svg.append("line") 
     .attr("class", "guideline") 
     .attr("y1", margin[0]) 
     .attr("y2", height+margin[0]) 
     .attr("opacity", originOpacity) 
     .attr("stroke", "#333") 
     .attr("pointer-events", "none"); 

}); 

svg.on("mouseout", function(d) { 
    svg.select(".guideline").remove(); 
}); 

Answer 1

आप हर MouseMove पर लाइन चयन कर रहे हैं, बजाय एक चर में लाइन रखें:

var line = svg.append("line") 
     .attr("class", "guideline") 
     .attr("y1", margin[0]) 
     .attr("y2", height+margin[0]) 
     .attr("opacity", 0) 
     .attr("stroke", "#333") 
     .attr("pointer-events", "none"); 

svg.on("mousemove", function(d) { 

    line 
     .attr("x1", d3.event.pageX-1) 
     .attr("x2", d3.event.pageY-1); 

}); 

svg.on("mouseover", function(d) { 
    line.attr("opacity", originOpacity); 
}); 

svg.on("mouseout", function(d) { 
    line.attr("opacity", 0); 
}); 

Answer 2

मैं एक ही समस्या हो रही है, लेकिन मैं दो बातों पर ध्यान :

1. यदि आप उच्च चार्ट देखते हैं, तो उन्होंने (उनके जेएस लाइब्रेरी में) एक समान वर्टिकल दिशानिर्देश लागू किया है, जो बहुत पीछे नहीं है। तो यह करना संभव है। उदाहरण के लिए देखें: here

2. मैं एक कंटेनर तत्व का उपयोग करें, जो करने के लिए मैं एक एसवीजी तत्व है, जो मुझे बहुत पसंद है, एक समन्वय अनुवाद/परिवर्तन के साथ एक समूह (छ) तत्व जोड़े को जोड़ा गया:

HTML:

<div id="d3-container"></div> 

जे एस:

var svg = d3.select("#d3-container") 
    .append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .attr("id","d3-svg") 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
    .attr("id","d3-canvas"); 

interes टिंग चीज है, जब मैं विभिन्न तत्वों के लिए माउस इवेंट (पहले उत्तर में उपरोक्त कोड का उपयोग करके) बाध्य करता हूं, तो मुझे बहुत अलग प्रदर्शन मिलता है: जब मैं इसे "डी 3-कैनवास" समूह से जोड़ता हूं तो मेरी निर्देशित रेखा बहुत धीमी और लगी हुई है पीछे, जब मैं इसे अपने मूल svg तत्व ("d3-svg") से बांधता हूं, यह पहले से ही तेज़ है, और यदि मैं इसे div ("d3-container") से जोड़ता हूं तो मुझे सबसे तेज़ प्रदर्शन मिलता है (हालांकि यह अभी भी नहीं है हालांकि उच्च स्टॉक के रूप में जल्दी)। तो मैं सोच रहा हूं कि समन्वय परिवर्तन माउस घटनाओं के लिए बहुत अधिक ओवरहेड जोड़ता है, लेकिन किसी भी तरह से या तो डी 3 या एसवीजी भी माउस घटनाओं के लिए अनुकूलित नहीं है।

Answer 3

बल्कि हर mousemove पर विशेषताओं को अद्यतन करने के बजाय, आप एक जोड़े को मिलीसेकंड देरी जोड़ सकते हैं:

var lastMove, elapsed; 
svg.on("mousemove", function(d) { 

    elapsed = Date.now() - lastMove; 
    if (elapsed < 40) return; 

    svg.select(".guideline") 
     .attr("x1", d3.mouse(this)[0]-1) 
     .attr("x2", d3.mouse(this)[0]-1); 

    lastMove = Date.now(); 
}); 

यह निश्चित रूप प्रदर्शन में सुधार होगा, लेकिन आंदोलनों अधिक अस्थिर बनाने की लागत पर। आपके द्वारा जांच की गई मिलीसेकंड की संख्या के साथ खेलें। 40 बहुत लंबा हो सकता है।

Answer 4

shape-rendering नामक एक सीएसएस संपत्ति है जो आपके एसवीजी को प्रस्तुत करने के लिए प्राथमिकता निर्धारित करती है। आप auto, optimizeSpeed, crispEdges, या geometricPrecision निर्दिष्ट कर सकते हैं, जहां ऑटो परिशुद्धता बलिदान के बिना गति और कुरकुरापन को समायोजित करने का प्रयास करता है।

मुझे पता चला है कि सेटिंग्स shape-rendering से auto मेरे क्रॉसहेयर के प्रदर्शन में वृद्धि हुई है। crispEdges और optimizeSpeed ​​कर्सर को अंतःस्थापित करने के लिए प्रतीत होता है। मैं एक पहेली में एक चिकनी क्रॉसहेयर को पुन: उत्पन्न करने में सक्षम नहीं था, लेकिन मेरे समाधान में यह वास्तव में पूरी तरह से चिकनी है।