d3js v5 + топойсон v3 Центрирование квадратного центроида с увеличением - PullRequest
Новая
       21

d3js v5 + топойсон v3 Центрирование квадратного центроида с увеличением

0 голосов
/ 22 ноября 2018

Я пытаюсь поставить квадрат в центре географического объекта.Я добавил оранжевые круги, чтобы отметить положение центроидов.

С масштабом = 1 (без увеличения) положение квадрата является правильным.enter image description here

Однако, с масштабом > 1 (с увеличением), существует перевод положения квадрата.enter image description here

Я предполагаю, что проблема возникает, когда я определяю положение квадрата. 

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 Ответ

0 голосов
/ 22 ноября 2018

Проблема в том, что вы хотите сохранить размер прямоугольника независимым от текущего масштаба.Таким образом, во время .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", ...).

...