系列文章目录
提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
提示：这里可以添加本文要记录的大概内容：
项目需要做知识图谱可视化展示，在调研后选择了d3，因为d3的demo一搜一大把。在这里记录下项目解决过程中遇到的一些问题。
提示：以下是本篇文章正文内容，下面案例可供参考
一、项目背景
后台从Neo4j接收数据，经过解析得到nodes和links的数组，交由d3展示。现在遇到的一个需求是：希望点击某一按钮，是对应的node在画布中居中。
二、解决过程记录
1.思路1
将对应节点的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的位置，失败。
2.思路2
参考另一个demo
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text {
font-size: 12px;
color: gray;
pointer-events: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var links = [
{sid:"张三", tid:"张涛", source: "张三", target: "张涛", type: "resolved", rela:"儿子"},
{sid:"张三", tid:"王小花", source: "张三", target: "王小花", type: "resolved", rela:"配偶"},
{sid:"张三", tid:"张丽丽", source: "张三", target: "张丽丽", type: "resolved", rela:"妹妹"},
{sid:"张三", tid:"李小珍", source: "张三", target: "李小珍", type: "resolved", rela:"母亲"},
{sid:"张三", tid:"张一山", source: "张三", target: "张一山", type: "resolved", rela:"父亲"},
{sid:"张三", tid:"张家辉", source: "张三", target: "张家辉", type: "resolved",rela:"哥哥"},
{sid:"张家辉", tid:"张明", source: "张家辉", target: "张明", type: "resolved",rela:"儿子"},
{sid:"张玉山", tid:"张三", source: "张玉山", target: "张三", type: "resolved",rela:"儿子"},
{sid:"张三", tid:"张玉山", source: "张三", target: "张玉山", type: "resolved",rela:"父亲"},
{sid:"张玉山", tid:"张名扬", source: "张玉山", target: "张名扬", type: "resolved",rela:"儿子"},
{sid:"张玉山", tid:"张名胜", source: "张玉山", target: "张名胜", type: "resolved",rela:"儿子"},
{sid:"张玉山", tid:"杨潇", source: "张玉山", target: "杨潇", type: "resolved",rela:"配偶"},
{sid:"张玉山", tid:"张子枫", source: "张玉山", target: "张子枫", type: "resolved",rela:"女儿"},
];
var nodes = {};
links.forEach(function(link) {undefined
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, id: link.sid});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, id: link.tid});
});
var width = 1560,
height = 800;
var force = d3.layout.force()//layout将json格式转化为力学图可用的格式
.nodes(d3.values(nodes))//设定节点数组
.links(links)//设定连线数组
.size([width, height])//作用域的大小
.linkDistance(180)//连接线长度
.charge(-1500)//顶点的电荷数。该参数决定是排斥还是吸引，数值越小越互相排斥
.on("tick", tick)//指时间间隔，隔一段时间刷新一次画面
.start();//开始转换
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
//箭头
var marker=
svg.append("marker")
//.attr("id", function(d) { return d; })
.attr("id", "resolved")
//.attr("markerUnits","strokeWidth")//设置为strokeWidth箭头会随着线的粗细发生变化
.attr("markerUnits","userSpaceOnUse")
.attr("viewBox", "0 -5 10 10")//坐标系的区域
.attr("refX",32)//箭头坐标
.attr("refY", -1)
.attr("markerWidth", 12)//标识的大小
.attr("markerHeight", 12)
.attr("orient", "auto")//绘制方向，可设定为：auto（自动确认方向）和 角度值
.attr("stroke-width",2)//箭头宽度
.append("path")
.attr("d", "M0,-5L10,0L0,5")//箭头的路径
.attr('fill','gray');//箭头颜色
/* 将连接线设置为曲线
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) { return "link " + d.type; })
.style("stroke",function(d){undefined
//console.log(d);
return "#A254A2";//连接线的颜色
})
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
*/
//设置连接线
var edges_line = svg.selectAll(".edgepath")
.data(force.links())
.enter()
.append("path")
.attr({
'd': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y},
'class':'edgepath',
//'fill-opacity':0,
//'stroke-opacity':0,
//'fill':'blue',
//'stroke':'red',
'id':function(d,i) {return 'edgepath'+i;}})
.style("stroke","gray")
.style("pointer-events", "none")
.style("stroke-width",0.5)//线条粗细
.attr("marker-end", "url(#resolved)" );//根据箭头标记的id号标记箭头
var edges_text = svg.append("g").selectAll(".edgelabel")
.data(force.links())
.enter()
.append("text")
.style("pointer-events", "none")
//.attr("class","linetext")
.attr({ 'class':'edgelabel',
'id':function(d,i){return 'edgepath'+i;},
'dx':80,
'dy':0
//'font-size':10,
//'fill':'#aaa'
});
//设置线条上的文字
edges_text.append('textPath')
.attr('xlink:href',function(d,i) {return '#edgepath'+i})
.style("pointer-events", "none")
.text(function(d){return d.rela;});
//圆圈
var circle = svg.append("g").selectAll("circle")
.data(force.nodes())//表示使用force.nodes数据
.enter().append("circle")
.style("fill","white")
.style('stroke',"gray")
.attr("r", 28)//设置圆圈半径
.on("click",function(node){undefined
console.log(node.id);
//单击时让连接线加粗
edges_line.style("stroke-width",function(line){undefined
if(line.source.name==node.name || line.target.name==node.name){undefined
return 2;
}else{undefined
return 0.5;
}
});
//d3.select(this).style('stroke-width',2);
})
.call(force.drag);//将当前选中的元素传到drag函数中，使顶点可以被拖动
/*
circle.append("text")
.attr("dy", ".35em")
.attr("text-anchor", "middle")//在圆圈内添加文字
.text(function(d) {
//console.log(d);
return d.name;
}); */
//圆圈的提示文字
circle.append("svg:title")
.text(function(node) {
return "双击可查看详情";
});
//矩形
// var rect=svg.append("rect")
// .attr({"x":100,"y":100,
// "width":100,"height":50,
// "rx":5,//水平圆角
// "ry":10//竖直圆角
// })
// .style({undefined
// "stroke":"red",
// "stroke-width":1,
// "fill":"yellow"
// });
var text = svg.append("g").selectAll("text")
.data(force.nodes())
//返回缺失元素的占位对象（placeholder），指向绑定的数据中比选定元素集多出的一部分元素。
.enter()
.append("text")
.attr("dy", ".35em")
.attr("text-anchor", "middle")//在圆圈中加上数据
.style('fill',"gray")
.attr('x',function(d){undefined
// console.log(d.name+"---"+ d.name.length);
var re_en = /[a-zA-Z]+/g;
//如果是全英文，不换行
if(d.name.match(re_en)){undefined
d3.select(this).append('tspan')
.attr('x',0)
.attr('y',2)
.text(function(){return d.name;});
}
//如果小于四个字符，不换行
else if(d.name.length<=4){undefined
d3.select(this).append('tspan')
.attr('x',0)
.attr('y',2)
.text(function(){return d.name;});
}else{undefined
var top=d.name.substring(0,4);
var bot=d.name.substring(4,d.name.length);
d3.select(this).text(function(){return '';});
d3.select(this).append('tspan')
.attr('x',0)
.attr('y',-7)
.text(function(){return top;});
d3.select(this).append('tspan')
.attr('x',0)
.attr('y',10)
.text(function(){return bot;});
}
//直接显示文字
/*.text(function(d) {
return d.name; */
});
/* 将文字显示在圆圈的外面
var text2 = svg.append("g").selectAll("text")
.data(force.links())
//返回缺失元素的占位对象（placeholder），指向绑定的数据中比选定元素集多出的一部分元素。
.enter()
.append("text")
.attr("x", 150)//设置文字坐标
.attr("y", ".50em")
.text(function(d) {
//console.log(d);
//return d.name;
//return d.rela;
console.log(d);
return '1111';
});*/
function tick() {undefined
//path.attr("d", linkArc);//连接线
circle.attr("transform", transform1);//圆圈
text.attr("transform", transform2);//顶点文字
//edges_text.attr("transform", transform3);
//text2.attr("d", linkArc);//连接线文字
//console.log("text2...................");
//console.log(text2);
//edges_line.attr("x1",function(d){ return d.source.x; });
//edges_line.attr("y1",function(d){ return d.source.y; });
//edges_line.attr("x2",function(d){ return d.target.x; });
//edges_line.attr("y2",function(d){ return d.target.y; });
//edges_line.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; });
//edges_line.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });
edges_line.attr('d', function(d) {
var path='M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y;
return path;
});
edges_text.attr('transform',function(d,i){undefined
if (d.target.x<d.source.x){undefined
bbox = this.getBBox();
rx = bbox.x+bbox.width/2;
ry = bbox.y+bbox.height/2;
return 'rotate(180 '+rx+' '+ry+')';
}
else {undefined
return 'rotate(0)';
}
});
}
//设置连接线的坐标,使用椭圆弧路径段双向编码
function linkArc(d) {undefined
//var dx = d.target.x - d.source.x,
// dy = d.target.y - d.source.y,
// dr = Math.sqrt(dx * dx + dy * dy);
//return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
//打点path格式是：Msource.x,source.yArr00,1target.x,target.y
return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y
}
//设置圆圈和文字的坐标
function transform1(d) {undefined
return "translate(" + d.x + "," + d.y + ")";
}
function transform2(d) {undefined
return "translate(" + (d.x) + "," + d.y + ")";
}
</script>
这个例子中，整幅图有保持在中间的趋势。结果，这个居中效果是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 + ")";
}
总结
失败了哇
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
