मैं भौगोलिक इकाई के केंद्र में एक वर्ग लगाने की कोशिश करता हूं। मैंने सेंट्रोइड्स की स्थिति को चिह्नित करने के लिए नारंगी सर्कल जोड़े।

पैमाने की सीमा = 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
Bellice 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
Yaroslav Sergienko 22 नवम्बर 2018, 15:28