用D3和Leaflet重复SVG

Question

So I am starting another d3 project. This project includes rendering a static network graph in D3 on a LeafletJS canvas (to allow standardized zoom/pan controls across our other visualizations). The problem with this network is that it needs to wrap around the x-axis (ex: a node on the right may be connected to a node on the left). I want to be able to pan seamlessly across multiple instances of this same graph, but I'm not sure what the best approach to this problem is.

My best idea so far is to render two identical copies of the visualization and position them one after the other...Then use Leaflet's worldCopyJump to let one visualization render while the user is panning across the other. Obviously though, with one instance of the visualization needing 1500+ SVG objects, this may not be the best approach.

So U may not need exact code, but could someone help me think of a solid approach? I'll be glad to provide more details if necessary.

Answer 1

The clean but complicated way to avoid duplicating the network graph is to update the coordinates of the network graph's nodes based on the canvas' pan position, as well as add temporary duplicates on the other side when necessary (when a link intersects the graph's boundaries). The first part of the problem is simpler. Based on the following example:

http://bl.ocks.org/jose187/4733747

You can update the simple transform:

var transform = function(d) { return "translate(" + d.x + "," + d.y + ")"; };

To work with the pan position that you can pass along to your d3 update code (code that runs on a canvas pan event so that the pan position may be calculated and passed along):

var transform = function(d, canvasPanX) {
    // figure out if the point in question is off the canvas and
    // reposition it to a visible position
};

The temporary duplicates seem much more difficult to implement, but it may help to place duplicate geometry in a separate svg group so you can wipe it out easily and start fresh after each pan.

I understand that my suggestions are very high level - let me know what you think so I can think about it further, as well as if it would help if I tried to fill in more details.