D3: как отключить увеличение значков с фоновым изображением?

Question

D3: как отключить увеличение значков с фоновым изображением?

1

Я пытаюсь позиционировать значки на карте D3. Эти значки я строю, вставляя фигуры и заполняя их фон картиной (PNG, SVG и т.д.),

Это прекрасно работает, пока вы не попытаетесь увеличить масштаб. Когда вы увеличиваете масштаб, значки искажаются с помощью преобразования, и я не могу сохранить их фиксированными/согласованными с размером родительской формы. Вот jsfiddle, демонстрирующий мою проблему: https://jsfiddle.net/Guill84/Lo2mjhjq/3/

Как изменить масштаб, чтобы он не испортился с иконкой аватара? Псевдокод должен быть:

d3.select("#avatar").attr("transform", "scale(*don't scale with rest*)
 translate(*translate with rest to enable panning*)")

Noobster 11 фев. 2018, в 17:20

Источник

Теги:

javascript

d3.js

css

1 ответ

Ещё вопросы

Gerardo Furtado · Accepted Answer · 2018-02-12T10-55-00.000Z

Легкое решение (из многих) применяет одно и то же изменение к элементу <image>:

d3.select("#avatar")
    .select("image")
    .attr("width", 40 / d3.event.scale)
    .attr("height", 40 / d3.event.scale);

Вот обновленный JSFiddle: https://jsfiddle.net/nm8bLLcL/