मैं भौगोलिक इकाई के केंद्र में एक वर्ग लगाने की कोशिश करता हूं। मैंने सेंट्रोइड्स की स्थिति को चिह्नित करने के लिए नारंगी सर्कल जोड़े।
पैमाने की सीमा = 1 (कोई ज़ूम नहीं) के साथ, वर्ग की स्थिति सही है। 
हालांकि, पैमाने की सीमा> 1 (ज़ूम के साथ) के साथ, वर्ग की स्थिति का अनुवाद होता है। 
मुझे लगता है कि समस्या तब होती है जब मैं वर्ग की स्थिति को परिभाषित करता हूं।
let ctrSquare = g.attr("class","ctr_square")
.selectAll(".ctr_square")
.data(featureCollectionZe.features)
.enter()
.append("rect")
.attr("x", (d)=>{return path.centroid(d)[0] - 7/2;})
.attr("y", (d)=>{return path.centroid(d)[1] - 7/2;})
.attr("width",7)
.attr("height",7)
.attr("fill","#0000ff")
.attr("stroke","#0000ff");
मेरा कोड यह है: https://plnkr.co/edit/K0k9ACxFWgzsqzHmQHmM
1
22 नवम्बर 2018, 17:41
1 उत्तर
सबसे बढ़िया उत्तर
समस्या यह है कि आप आयत आकार को वर्तमान पैमाने से स्वतंत्र रखना चाहते हैं। तो, .on("zoom", ...) के दौरान आप सुधार width और height करते हैं:
ctrSquare
.attr("width",7/d3.event.transform.k)
.attr("height",7/d3.event.transform.k);
इसे ध्यान में रखते हुए, उनकी x और y स्थिति के लिए सही कोड निम्नलिखित है:
ctrSquare
.attr("x",d => path.centroid(d)[0] - 7/d3.event.transform.k/2)
.attr("y",d => path.centroid(d)[1] - 7/d3.event.transform.k/2)
तो बस इन पंक्तियों को .on("zoom", ...) में जोड़ें।
2
22 नवम्बर 2018, 15:28