Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/arduino/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 用D3和传单重复SVG_Javascript_Html_Svg_D3.js_Leaflet - Fatal编程技术网

Javascript 用D3和传单重复SVG

Javascript 用D3和传单重复SVG,javascript,html,svg,d3.js,leaflet,Javascript,Html,Svg,D3.js,Leaflet,所以我开始另一个d3项目。这个项目包括在D3中在一个JS画布上呈现一个静态网络图(允许在我们的其他可视化中进行标准化的缩放/平移控制)。该网络的问题是它需要绕x轴(例如:右侧的节点可能连接到左侧的节点)。我希望能够无缝地平移同一个图的多个实例,但我不确定解决这个问题的最佳方法是什么 到目前为止,我的最佳想法是渲染两个相同的可视化副本,并将它们一个接一个地放置……然后使用传单的worldCopyJump,在用户平移另一个的同时渲染一个可视化。显然,一个可视化实例需要1500多个SVG对象,这可能不

所以我开始另一个d3项目。这个项目包括在D3中在一个JS画布上呈现一个静态网络图(允许在我们的其他可视化中进行标准化的缩放/平移控制)。该网络的问题是它需要绕x轴(例如:右侧的节点可能连接到左侧的节点)。我希望能够无缝地平移同一个图的多个实例,但我不确定解决这个问题的最佳方法是什么

到目前为止,我的最佳想法是渲染两个相同的可视化副本,并将它们一个接一个地放置……然后使用传单的worldCopyJump,在用户平移另一个的同时渲染一个可视化。显然,一个可视化实例需要1500多个SVG对象,这可能不是最好的方法


所以你可能不需要精确的代码,但有人能帮我想出一个可靠的方法吗?如果有必要,我很乐意提供更多细节。

避免复制网络图的干净但复杂的方法是根据画布的平移位置更新网络图节点的坐标,并在必要时(当链接与图形边界相交时)在另一侧添加临时副本。问题的第一部分比较简单。基于以下示例:

可以更新简单变换:

var transform = function(d) { return "translate(" + d.x + "," + d.y + ")"; };
要使用可以传递给d3更新代码的平移位置(在画布平移事件上运行的代码,以便可以计算并传递平移位置),请执行以下操作:

临时副本似乎更难实现,但将重复的几何体放置在单独的svg组中可能会有所帮助,这样您就可以轻松地将其清除,并在每次平移后重新开始


我知道我的建议非常高-请告诉我您的想法,以便我可以进一步考虑,如果我尝试填写更多详细信息,是否会有所帮助。

您可以用于连接吗?遗憾的是,不可以。每个边和节点都必须保留其预定义的位置。(这是为了学术形象……他们很挑剔)。@1080p如果你找到答案,请写在这里:)
var transform = function(d, canvasPanX) {
    // figure out if the point in question is off the canvas and
    // reposition it to a visible position
};