Как получить позицию X и Y из многоугольника SVG С javascript? [Дубликат]

Question

Как получить позицию X и Y из многоугольника SVG С javascript? [Дубликат]

Использование функции отображения массива - очень распространенный способ прокрутки массива элементов и создания компонентов по ним в React, это отличный способ сделать цикл, который довольно эффективен и удобен для выполнения ваших циклов в JSX. не единственный способ сделать это, но предпочтительный путь. Кроме того, не забудьте указать уникальный ключ для каждой итерации по мере необходимости. Функция Map создает уникальный индекс из 0, но не рекомендуется использовать индекс, но если ваше значение уникально или есть уникальный ключ, вы можете использовать их:

<tbody>
  {numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>

Также несколько строк из MDN if вы не знакомы с функцией отображения на массиве:

map вызывает предоставленную функцию обратного вызова один раз для каждого элемента массива в порядке и создает новый массив из результатов. callback вызывается только для индексов массива, которым присвоены значения, в том числе неопределенные. Он не называется отсутствующими элементами массива (то есть индексы, которые никогда не были установлены, которые были удалены или которым никогда не назначено значение).

обратный вызов вызывается с тремя аргументами: значение элемента, индекс элемента и объект Array, пройденный.

Если для отображения предусмотрен параметр thisArg, он будет использоваться в качестве обратного вызова этого значения. В противном случае значение undefined будет использоваться как его значение. Это значение, в конечном счете наблюдаемое обратным вызовом, определяется в соответствии с обычными правилами для определения этого вида функции.

map не мутирует массив, на который он вызывается (хотя callback, если он вызван, может делать так).

18

javascript d3.js svg leaflet

задан Zikes 21 August 2012 в 21:29

2 ответа

Принятый ответ работал отлично для меня, пока я не проверил в Edge. Я не могу комментировать, так как у меня недостаточно кармы или что-то еще, но я использовал это решение и нашел проблему с Microsoft Edge, которая не использует x или y, просто верх / левый / нижний / правый и т. Д.

Таким образом, вышеуказанный код должен быть:

function getBoundingBoxCenter (selection) {
  // get the DOM element from a D3 selection
  // you could also use "this" inside .each()
  var element = selection.node();
  // use the native SVG interface to get the bounding box
  var bbox = element.getBBox();
  // return the center of the bounding box
  return [bbox.left + bbox.width/2, bbox.top + bbox.height/2];
}

0

ответ дан Neil Ruud 25 August 2018 в 02:13

Другие вопросы по тегам:

javascript d3.js svg leaflet

Похожие вопросы:

score 52 · Accepted Answer

Все функции D3, похоже, предполагают, что вы начинаете с GeoJSON. Тем не менее, я на самом деле не думаю, что вам нужен центроид для этого - вам действительно нужна ограничивающая рамка, и, к счастью, это доступно непосредственно из интерфейса SVG DOM:

function getBoundingBoxCenter (selection) {
  // get the DOM element from a D3 selection
  // you could also use "this" inside .each()
  var element = selection.node();
  // use the native SVG interface to get the bounding box
  var bbox = element.getBBox();
  // return the center of the bounding box
  return [bbox.x + bbox.width/2, bbox.y + bbox.height/2];
}

Это на самом деле немного лучше, чем настоящий центроид с целью масштабирования, поскольку он позволяет избежать некоторых проблем с проекцией, которые вы могли бы запустить.