使用值作为节点标签一部分的d3.js图形
下面是我的d3.js图形，它使用节点和链接呈现图形。其中一个要求是在节点名中添加值编号。所以当前类似节点的名称显示为“User Login”，我希望它是“User Login（5）” 这段代码是使用值作为节点标签一部分的d3.js图形,d3.js,graph,D3.js,Graph,下面是我的d3.js图形，它使用节点和链接呈现图形。其中一个要求是在节点名中添加值编号。所以当前类似节点的名称显示为“User Login”，我希望它是“User Login（5）” 这段代码是 node.append("text").text(function (d) { return d.name; }).style("font-size", "12
node.append("text").text(function (d) {
return d.name;
}).style("font-size", "12px").attr("dy", "1em");
<html>
<head>
<script src="//d3js.org/d3.v3.min.js"></script>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
</head>
<body>
<script>
var graph = {
"nodes" : [{"name" : "User Login"},{"name" : "Appointments"},{"name" : "Store Visit"},{"name" : "Visit History"},{"name" : "Resume Store Visit"}],
"links" : [{
"source": "Appointments",
"target": "User Login",
"value": 1
}, {
"source": "Store Visit",
"target": "User Login",
"value": 8
}, {
"source": "Visit History",
"target": "User Login",
"value": 10
}, {
"source": "Visit History",
"target": "Store Visit",
"value": 6
}, {
"source": "Resume Store Visit",
"target": "User Login",
"value": 1
}]
};
var data;// a global
d3.json("http://127.0.0.1:7101/MUDRESTService/rest/v1/mudstats?onlyData=true", function (error, json) {
data = json;
});
var width = 960, height = 500;
var color = d3.scale.category20();
var force = d3.layout.force().charge( - 120).linkDistance(300).size([width, height]);
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
graph.links = graph.links.map(function(l) {
var sourceNode = graph.nodes.filter(function(n) {
return n.name === l.source;
})[0],
targetNode = graph.nodes.filter(function(n) {
return n.name === l.target;
})[0];
return {
source: sourceNode,
target: targetNode,
value: l.value
};
});
force.nodes(graph.nodes).links(graph.links).start();
svg.append("svg:defs").selectAll("marker").data(["end"])// Different link/path types can be defined here
.enter().append("svg:marker")// This section adds in the arrows
.attr("id", String).attr("viewBox", "0 -5 10 10")
.attr("refX", 15).attr("refY", - 1.5).attr("markerWidth", 6).attr("markerHeight", 6).attr("orient", "auto")
.append("svg:path").attr("d", "M0,-5L10,0L0,5");
var link = svg.selectAll(".link").data(graph.links).enter().append("line")
.attr("class", "link").attr("marker-end", "url(#end)")
.style("stroke-width", function (d) {
return Math.sqrt(d.value);
});
var node = svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
}).call(force.drag);
node.append("rect").attr("class", "node").attr("width", 100).attr("height", 35).style("fill", function (d) {
return color(d.group);
}).style("stroke", "black").style("stroke-width", "1px");
node.append("text").text(function (d) {
return d.name;
}).style("font-size", "12px").attr("dy", "1em");
node.append("title").text(function (d) {
return d.name;
});
force.on("tick", function () {
link.attr("x1", function (d) {
return d.source.x;
}).attr("y1", function (d) {
return d.source.y;
}).attr("x2", function (d) {
return d.target.x;
}).attr("y2", function (d) {
return d.target.y;
});
node.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
</script>
</body></html>
.节点{
冲程：#fff；
笔划宽度：1.5px；
}
.链接{
行程：#999；
笔画不透明度：.6；
}
变量图={
“节点”：[{“名称”：“用户登录”}，{“名称”：“约会”}，{“名称”：“店铺访问”}，{“名称”：“访问历史”}，{“名称”：“恢复店铺访问”}]，
“链接”：[{
“来源”：“任命”，
“目标”：“用户登录”，
“价值”：1
}, {
“来源”：“店铺参观”，
“目标”：“用户登录”，
“价值”：8
}, {
“来源”：“访问历史”，
“目标”：“用户登录”，
“价值”：10
}, {
“来源”：“访问历史”，
“目标”：“店铺访问”，
“价值”：6
}, {
“来源”：“恢复店铺访问”，
“目标”：“用户登录”，
“价值”：1
}]
};
var数据；//全球性的
d3.json（“http://127.0.0.1:7101/MUDRESTService/rest/v1/mudstats?onlyData=true，函数（错误，json）{
data=json；
});
变量宽度=960，高度=500；
var color=d3.scale.category20（）；
var-force=d3.layout.force（）.charge（-120）.链接距离（300）.大小（[宽度，高度]）；
var svg=d3.select（“body”）.append（“svg”）.attr（“width”，width）.attr（“height”，height）；
graph.links=graph.links.map（函数（l）{
var sourceNode=graph.nodes.filter（函数（n）{
返回n.name==l.source；
})[0],
targetNode=graph.nodes.filter（函数（n）{
返回n.name==l.target；
})[0];
返回{
来源：sourceNode，
目标：targetNode，
价值：l.value
};
});
force.nodes（graph.nodes）.links（graph.links.start（）；
svg.append（“svg:defs”）.selectAll（“marker”）.data（[“end”]）//这里可以定义不同的链接/路径类型
.enter（）.append（“svg:marker”）//此部分在箭头中添加
.attr（“id”，字符串）.attr（“视图框”，“0-5 10”）
.attr（“refX”，15）.attr（“refY”，1.5）.attr（“markerWidth”，6）.attr（“markerHeight”，6）.attr（“orient”，“auto”）
.append（“svg:path”）.attr（“d”，“M0，-5L10,0L0,5”）；
var link=svg.selectAll（“.link”）.data（graph.links）。enter（）.append（“line”）
.attr（“类”、“链接”）.attr（“标记结束”、“url（#结束）”）
.样式（“笔划宽度”，功能（d）{
返回Math.sqrt（d.value）；
});
var node=svg.selectAll（“.node”）.data（graph.nodes.enter（）.append（“g”）.attr（“transform”），函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
}).呼叫（强制拖动）；
node.append（“rect”）.attr（“class”，“node”）.attr（“width”，100）.attr（“height”，35）.style（“fill”，function（d）{
返色（d组）；
})样式（“笔划”、“黑色”）。样式（“笔划宽度”、“1px”）；
node.append（“text”）.text（函数（d）{
返回d.name；
}).style（“字体大小”，“12px”）.attr（“dy”，“1em”）；
node.append（“title”）.text（函数（d）{
返回d.name；
});
强制打开（“勾号”，函数（）{
link.attr（“x1”，函数（d）{
返回d.source.x；
}).attr（“y1”，函数（d）{
node.append("text").text(function(d) {
//filter out all the links which has this node as source or target
var flinks = graph.links.filter(function(link){
return (link.source.name == d.name || link.target.name == d.name);
});
//all links which has the nodes in source or target
return d.name + " (" + flinks.length+")";
}).style("font-size", "12px").attr("dy", "1em");