Обнаружение видимых узлов в принудительном макете d3.js после масштабирования

Я использую принудительно направленный макет в d3.js один раз при загрузке для позиционирования узлов и ребер. Затем я могу масштабировать и панорамировать SVG. Когда я увеличиваю масштаб, я хочу определить, какие узлы и ребра видны, поэтому я могу реализовать ленивую загрузку дополнительных данных только для видимых узлов и ребер.

Кто-нибудь знает, как лучше всего получить (частично) видимые элементы?

Код ниже (просто соединил несколько примеров):

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("pointer-events", "all")
  .append('svg:g')
  .call(d3.behavior.zoom().on("zoom", redraw))
  .append('svg:g')

svg.append('svg:rect')
  .attr('width', width)
  .attr('height', height)
  .attr('fill', 'white')

function redraw() {
  trans=d3.event.translate;
  scale=d3.event.scale
  svg.attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")")
  console.log(scale)
}

person Mr.    schedule 17.11.2012    source источник
comment
Можете ли вы включить код, который вы используете в настоящее время? Подход может зависеть от того, как вы масштабируете визуализацию.   -  person nrabinowitz    schedule 19.11.2012


Ответы (1)


Если вы используете шкалы, вы можете найти текущий видимый диапазон, используя scale.invert. Итак, чтобы найти видимые значения для оси, ширина которой составляет 600 пикселей, используйте x.invert(0) и x.invert(600).

person sparrowman    schedule 08.05.2013