问题:
例如引力图中,缩放浏览器窗口,canvas无自适应调整大小时,会导致点击node时无法正确获取到坐标,从而影响拖拽等操作。
解决:
对window进行监听,回调中重新设置画布的宽高
function updateWindow(){
x = w.innerWidth || e.clientWidth || g.clientWidth;
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
svg.attr("width", x).attr("height", y);
}
d3.select(window).on('resize.updatesvg', updateWindow);
ps: 引力图使用canvas画的,所以没有svg的自适应功能
如果时svg,只需要
var svg = d3.select("div#container")
.append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 300 300")
.classed("svg-content", true);
在画知识图谱这种节点图形多的引力图,最好使用的是canvas。