ノードとエッジを配置するために、ロード時に一度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)
}