无标题网页_无标题的心情说说?

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

系列文章目录前言一、项目背景二、解决过程记录

1.思路12.思路2 总结

提示：这里可以添加本文要记录的大概内容：

项目需要做知识图谱可视化展示，在调研后选择了d3，因为d3的demo一搜一大把。在这里记录下项目解决过程中遇到的一些问题。

提示：以下是本篇文章正文内容，下面案例可供参考

后台从Neo4j接收数据，经过解析得到nodes和links的数组，交由d3展示。现在遇到的一个需求是：希望点击某一按钮，是对应的node在画布中居中。

将对应节点的x和y置为居中
代码如下（示例）：

d3.select('#svg1 .nodes').selectAll('circle').attr('class', function(d) {
							// 输入节点id的小写等于name则显示，否则隐藏
							if (d.properties.name.indexOf(name) >= 0) {
								return '';
							} else {
								// 优化：与该搜索节点相关联的节点均显示
								// links链接的起始节点进行判断,如果其id等于name则显示这类节点
								// 注意: graph=data
								for (var i = 0; i < links.length; i++) {
									// 如果links的起点等于name，并且终点等于正在处理的则显示
									if ((links[i]['source'].properties.name.indexOf(name) >= 0) &&
										(links[i]['target'].id == d.id)) {
										return '';
									}
									// 如果links的终点等于name，并且起点等于正在处理的则显示
									if ((links[i]['target'].properties.name.indexOf(name) >= 0) &&
										(links[i]['source'].id == d.id)) {
										return '';
									}
								}
								return 'inactive'; //隐藏
							}
						})
						.attr('cx',width/2).attr('cy',height/2)         // 这种简单粗暴的方式失败

效果：
点击前

点击后

结论
这种方式只能改变单个node的位置，失败。

参考另一个demo

这个例子中，整幅图有保持在中间的趋势。结果，这个居中效果是d3默认的，然后拖拽后回归的效果是下边代码

  circle.attr("transform", transform1);//圆圈
  text.attr("transform", transform2);//顶点文字

//设置圆圈和文字的坐标
function transform1(d) {undefined
  return "translate(" + d.x + "," + d.y + ")";
}
function transform2(d) {undefined
      return "translate(" + d.x + "," + d.y + ")";
}

失败了哇