Text 在rect in force布局图d3.js中添加文本
这是我的图表。。我有矩形节点，我想在节点中包含文本。 我试过了 但是不起作用。如何对节点和文本进行分组。 我想在节点上添加和编辑特征。要编辑文本，我该怎么做Text 在rect in force布局图d3.js中添加文本,text,d3.js,force-layout,rect,Text,D3.js,Force Layout,Rect,这是我的图表。。我有矩形节点，我想在节点中包含文本。 我试过了 但是不起作用。如何对节点和文本进行分组。 我想在节点上添加和编辑特征。要编辑文本，我该怎么做 <!DOCTYPE html> <meta charset="utf-8"> <head> <title>Force Editor</title> <!-- <script src="d3.v2.min.js"></script> --> <
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Force Editor</title>
<!-- <script src="d3.v2.min.js"></script> -->
<script src="http://d3js.org/d3.v2.min.js"></script>
<!-- <script src="jquery-1.8.3.min.js"></script> -->
<style>
body {
font: 13px sans-serif;
position: relative;
width: auto;
height: auto;
}
.node {
fill: #000;
cursor: crosshair;
}
.node_selected {
fill: #ff7f0e;
stroke: #ff7f0e;
}
.drag_line {
stroke: #999;
stroke-width: 5;
pointer-events: none;
}
.drag_line_hidden {
stroke: #999;
stroke-width: 0;
pointer-events: none;
}
.link {
stroke: #999;
stroke-width: 5;
cursor: crosshair;
}
.link_selected {
stroke: #ff7f0e;
}
</style>
<head>
<body>
<div id="chart">
</div>
<script>
var width = 1800,
height = 800,
fill = d3.scale.ordinal().range(["#ff0000", "#2ca02c","#ff0000"]);
// mouse event vars
var selected_node = null,
selected_link = null,
mousedown_link = null,
mousedown_node = null,
mouseup_node = null;
// init svg
var outer = d3.select("#chart")
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.attr("pointer-events", "all");
var vis = outer
.append('svg:g')
.call(d3.behavior.zoom().on("zoom", rescale))
.on("dblclick.zoom", null)
.append('svg:g')
.on("mousemove", mousemove)
.on("mousedown", mousedown)
.on("mouseup", mouseup);
vis.append('svg:rect')
.attr('width', width)
.attr('height', height)
.attr('fill', 'white');
// init force layout
var force = d3.layout.force()
.size([width, height])
.nodes([{}]) // initialize with a single node
.linkDistance(250)
.charge(-1500)
.on("tick", tick)
;
// line displayed when dragging new nodes
var drag_line = vis.append("line")
.attr("class", "drag_line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", 0);
// get layout properties
var nodes = force.nodes(),
links = force.links(),
node = vis.selectAll(".node"),
link = vis.selectAll(".link");
// add keyboard callback
d3.select(window)
.on("keydown", keydown);
redraw();
// focus on svg
// vis.node().focus();
function mousedown() {
if (!mousedown_node && !mousedown_link) {
// allow panning if nothing is selected
vis.call(d3.behavior.zoom().on("zoom"), rescale);
return;
}
}
function mousemove() {
if (!mousedown_node) return;
// update drag line
drag_line
.attr("x1", mousedown_node.x)
.attr("y1", mousedown_node.y)
.attr("x2", d3.svg.mouse(this)[0])
.attr("y2", d3.svg.mouse(this)[1]);
}
function mouseup() {
if (mousedown_node) {
// hide drag line
drag_line
.attr("class", "drag_line_hidden")
if (!mouseup_node) {
// add node
var point = d3.mouse(this),
node = {x: point[0], y: point[1]},
n = nodes.push(node);
// select new node
selected_node = node;
selected_link = null;
// add link to mousedown node
links.push({source: mousedown_node, target: node});
}
redraw();
}
// clear mouse event vars
resetMouseVars();
}
function resetMouseVars() {
mousedown_node = null;
mouseup_node = null;
mousedown_link = null;
}
function tick() {
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("x", function(d) { return d.x-10; })// for circle its cx
.attr("y", function(d) { return d.y-10; });//for circle its cy
}
// rescale g
function rescale() {
trans=d3.event.translate;
scale=d3.event.scale;
vis.attr("transform",
"translate(" + trans + ")"
+ " scale(" + scale + ")");
}
// redraw force layout
function redraw() {
link = link.data(links);
link.enter().insert("line", ".node")
.attr("class", "link")
.on("mousedown",
function(d) {
mousedown_link = d;
if (mousedown_link == selected_link) selected_link = null;
else selected_link = mousedown_link;
selected_node = null;
redraw();
})
link.exit().remove();
link
.classed("link_selected", function(d) { return d === selected_link; });
node = node.data(nodes);
//node.enter()//.insert("circle")
/*node.enter().insert("circle")
.attr("class","node")
.attr("r", 5)*/
var rectSize = 50;
node.enter().append("svg:rect")
.attr("class","node")
.attr("width", rectSize)
.attr("height", rectSize)
.style("fill","powderBlue")
.attr("id", "hello")
.attr("title", "hello")
.style("fixed","true")
//.text("hello")
.on("mousedown",
function(d) {
// disable zoom
vis.call(d3.behavior.zoom().on("zoom"), null);
mousedown_node = d;
if (mousedown_node == selected_node) selected_node = null;
else selected_node = mousedown_node;
selected_link = null;
// reposition drag line
drag_line
.attr("class", "link")
.attr("x1", mousedown_node.x)
.attr("y1", mousedown_node.y)
.attr("x2", mousedown_node.x)
.attr("y2", mousedown_node.y);
redraw();
})
.on("mousedrag",
function(d) {
// redraw();
})
.on("mouseup",
function(d) {
if (mousedown_node) {
mouseup_node = d;
if (mouseup_node == mousedown_node) { resetMouseVars(); return; }
// add link
var link = {source: mousedown_node, target: mouseup_node};
links.push(link);
// select new link
selected_link = link;
selected_node = null;
// enable zoom
vis.call(d3.behavior.zoom().on("zoom"), rescale);
redraw();
}
})
.transition()
.duration(750)
.ease("elastic")
//.attr("r", 6.5);
.attr("width", rectSize+1)
.attr("height", rectSize+1);
node.exit().transition()
//.attr("r", 0)
.remove();
node
.classed("node_selected", function(d) { return d === selected_node; });
if (d3.event) {
// prevent browser's default behavior
d3.event.preventDefault();
}
force.start();
}
function spliceLinksForNode(node) {
toSplice = links.filter(
function(l) {
return (l.source === node) || (l.target === node); });
toSplice.map(
function(l) {
links.splice(links.indexOf(l), 1); });
}
function keydown() {
if (!selected_node && !selected_link) return;
switch (d3.event.keyCode) {
case 8: // backspace
case 46: { // delete
if (selected_node) {
nodes.splice(nodes.indexOf(selected_node), 1);
spliceLinksForNode(selected_node);
}
else if (selected_link) {
links.splice(links.indexOf(selected_link), 1);
}
selected_link = null;
selected_node = null;
redraw();
break;
}
}
}
</script>
</body>
</html>
力编辑器
身体{
字体：13px无衬线；
位置：相对位置；
宽度：自动；
高度：自动；
}
.节点{
填写：#000；
光标：十字线；
}
.node_已选定{
填充：#ff7f0e；
行程：#ff7f0e；
}
.拖线{
行程：#999；
笔画宽度：5；
指针事件：无；
}
。拖动线隐藏{
行程：#999；
笔画宽度：0；
指针事件：无；
}
.链接{
行程：#999；
笔画宽度：5；
光标：十字线；
}
.link_已选定{
行程：#ff7f0e；
}
var宽度=1800，
高度=800，
fill=d3.scale.ordinal（）范围（[“#ff0000”、“#2ca02c”、“#ff0000”）；
//鼠标事件变量
var selected_node=null，
所选链接=空，
mousedown\u link=null，
mousedown_node=null，
mouseup_node=null；
//初始化svg
外部变量=d3。选择（“图表”）
.append（“svg:svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“指针事件”、“全部”）；
var vis=外部
.append（'svg:g'）
.call（d3.behavior.zoom（）.on（“缩放”，重新缩放））
.on（“dblclick.zoom”，null）
.append（'svg:g'）
.on（“mousemove”，mousemove）
.on（“mousedown”，mousedown）
.on（“mouseup”，mouseup）；
vis.append（'svg:rect'）
.attr（'width'，width）
.attr（'height'，height）
.attr（“填充”、“白色”）；
//初始部队布局
var-force=d3.layout.force（）
.尺寸（[宽度、高度]）
.nodes（[{}]）//使用单个节点初始化
.linkDistance（250）
。收费（-1500）
.on（“滴答”，滴答）
;
//拖动新节点时显示的行
var drag_line=vis.append（“行”）
.attr（“类”、“拖拽线”）
.attr（“x1”，0）
.attr（“y1”，0）
.attr（“x2”，0）
.attr（“y2”，0）；
//获取布局属性
var nodes=force.nodes（），
links=force.links（），
node=vis.selectAll（“.node”），
link=vis.selectAll（“.link”）；
//添加键盘回调
d3.选择（窗口）
.on（“按键向下”，按键向下）；
重画（）；
//关注svg
//vis.node（）.focus（）；
函数mousedown（）{
如果（！mousedown\u节点&！mousedown\u链接）{
//如果未选择任何内容，则允许平移
vis.call（d3.behavior.zoom（）.on（“zoom”），重缩放）；
返回；
}
}
函数mousemove（）{
如果（！mousedown_节点）返回；
//更新拖曳线
拖曳线
.attr（“x1”，mousedown_node.x）
.attr（“y1”，mousedown_node.y）
.attr（“x2”，d3.svg.mouse（this）[0]）
.attr（“y2”，d3.svg.mouse（this）[1]）；
}
函数mouseup（）{
if（鼠标向下\节点）{
//隐藏拖曳线
拖曳线
.attr（“类”，“拖动线隐藏”）
if（！mouseup_节点）{
//添加节点
var point=d3.鼠标（此），
节点={x:点[0]，y:点[1]}，
n=节点。推送（节点）；
//选择新节点
所选_节点=节点；
所选链接=空；
//将链接添加到mousedown节点
push（{source:mousedown_node，target:node}）；
}
重画（）；
}
//清除鼠标事件变量
resetMouseVars（）；
}
函数resetMouseVars（）{
mousedown_node=null；
mouseup_node=null；
mousedown\u link=null；
}
函数tick（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
node.attr（“x”，函数（d）{return d.x-10；}）//用于循环其cx
.attr（“y”，函数（d）{return d.y-10；}）；//用于圈其cy
}
//重新缩放g
函数重缩放（）{
trans=d3.event.translate；
比例=d3.event.scale；
vis.attr（“转换”，
“翻译（“+trans+”）
+“比例（“+比例+”）；
}
//重新绘制部队布局
函数重画（）{
链接=链接数据（链接）；
link.enter（）.insert（“行”，“节点”）
.attr（“类”、“链接”）
.on（“mousedown”，
函数（d）{
mousedown\u link=d；
如果（mousedown\u link==selected\u link）selected\u link=null；
else selected_link=鼠标向下_link；
所选_节点=null；
重画（）；
})
link.exit（）.remove（）；
链接
.classed（“link_selected”，函数（d）{return d===selected_link；}）；
节点=节点。数据（节点）；
//node.enter（）/.insert（“圆”）
/*node.enter（）.insert（“圆”）
.attr（“类”、“节点”）
.attr（“r”，5）*/
var-rectSize=50；
node.enter（）.append（“svg:rect”）
.attr（“类”、“节点”）
.attr（“宽度”，矩形尺寸）
.attr（“高度”，矩形尺寸）
.style（“填充”、“粉状蓝色”）
.attr（“id”，“你好”）
.attr（“标题”、“您好”）
.style（“固定”、“真实”）
//.text（“你好”）
.on（“mousedown”，
函数（d）{
//禁用缩放
vis.call（d3.behavior.zoom（）.on（“zoom”），null）；
mousedown_节点=d；
如果（mousedown\u node==selected\u node）selected\u node=null；
else selected_node=鼠标向下_node；
所选链接=空；
//重新定位拖曳线
拖曳线
.attr（“类”、“链接”）
.attr（“x1”，mousedown_node.x）
.attr（“y1”，mousedown_node.y）
.attr（“x2”，mousedown\u node.x）
.attr（“y2”，mousedown\u node.y）；
重画（）；
})
.on（“mousedrag”，
职能（d）{
//重画（）；
})
.on（“鼠标悬停”，
函数（d）{
if（鼠标向下\节点）{
mouseup_节点=d；
if（mouseup_node==mousedown_node）{resetMouseVars（）；return；}
//添加链接
var link={source:mousedown_节点，target:mouseup_节点}；
链接。推（链接）；
//选择新链接
所选链接=链接；
所选_节点=null；
//启用缩放
vis.call（d3.behavior.zoom（）.on（“zoom”），重缩放）；
重画（）；
}
})
.transition（）
.持续时间（750）
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Force Editor</title>
<!-- <script src="d3.v2.min.js"></script> -->
<script src="http://d3js.org/d3.v2.min.js"></script>
<!-- <script src="jquery-1.8.3.min.js"></script> -->
<style>
body {
font: 13px sans-serif;
position: relative;
width: auto;
height: auto;
}
.node {
fill: #000;
cursor: crosshair;
}
.node_selected {
fill: #ff7f0e;
stroke: #ff7f0e;
}
.drag_line {
stroke: #999;
stroke-width: 5;
pointer-events: none;
}
.drag_line_hidden {
stroke: #999;
stroke-width: 0;
pointer-events: none;
}
.link {
stroke: #999;
stroke-width: 5;
cursor: crosshair;
}
.link_selected {
stroke: #ff7f0e;
}
</style>
<head>
<body>
<div id="chart">
</div>
<script>
var width = 1800,
height = 800,
fill = d3.scale.ordinal().range(["#ff0000", "#2ca02c","#ff0000"]);
// mouse event vars
var selected_node = null,
selected_link = null,
mousedown_link = null,
mousedown_node = null,
mouseup_node = null;
// init svg
var outer = d3.select("#chart")
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.attr("pointer-events", "all");
var vis = outer
.append('svg:g')
.call(d3.behavior.zoom().on("zoom", rescale))
.on("dblclick.zoom", null)
.append('svg:g')
.on("mousemove", mousemove)
.on("mousedown", mousedown)
.on("mouseup", mouseup);
vis.append('svg:rect')
.attr('width', width)
.attr('height', height)
.attr('fill', 'white');
// init force layout
var force = d3.layout.force()
.size([width, height])
.nodes([{}]) // initialize with a single node
.linkDistance(250)
.charge(-1500)
.on("tick", tick)
;
// line displayed when dragging new nodes
var drag_line = vis.append("line")
.attr("class", "drag_line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", 0);
// get layout properties
var nodes = force.nodes(),
links = force.links(),
node = vis.selectAll(".node"),
link = vis.selectAll(".link");
// add keyboard callback
d3.select(window)
.on("keydown", keydown);
redraw();
// focus on svg
// vis.node().focus();
function mousedown() {
if (!mousedown_node && !mousedown_link) {
// allow panning if nothing is selected
vis.call(d3.behavior.zoom().on("zoom"), rescale);
return;
}
}
function mousemove() {
if (!mousedown_node) return;
// update drag line
drag_line
.attr("x1", mousedown_node.x)
.attr("y1", mousedown_node.y)
.attr("x2", d3.svg.mouse(this)[0])
.attr("y2", d3.svg.mouse(this)[1]);
}
function mouseup() {
if (mousedown_node) {
// hide drag line
drag_line
.attr("class", "drag_line_hidden")
if (!mouseup_node) {
// add node
var point = d3.mouse(this),
node = {x: point[0], y: point[1]},
n = nodes.push(node);
// select new node
selected_node = node;
selected_link = null;
// add link to mousedown node
links.push({source: mousedown_node, target: node});
}
redraw();
}
// clear mouse event vars
resetMouseVars();
}
function resetMouseVars() {
mousedown_node = null;
mouseup_node = null;
mousedown_link = null;
}
function tick() {
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("x", function(d) { return d.x-10; })// for circle its cx
.attr("y", function(d) { return d.y-10; });//for circle its cy
}
// rescale g
function rescale() {
trans=d3.event.translate;
scale=d3.event.scale;
vis.attr("transform",
"translate(" + trans + ")"
+ " scale(" + scale + ")");
}
// redraw force layout
function redraw() {
link = link.data(links);
link.enter().insert("line", ".node")
.attr("class", "link")
.on("mousedown",
function(d) {
mousedown_link = d;
if (mousedown_link == selected_link) selected_link = null;
else selected_link = mousedown_link;
selected_node = null;
redraw();
})
link.exit().remove();
link
.classed("link_selected", function(d) { return d === selected_link; });
node = node.data(nodes);
//node.enter()//.insert("circle")
/*node.enter().insert("circle")
.attr("class","node")
.attr("r", 5)*/
var rectSize = 50;
node.enter().append("svg:rect")
.attr("class","node")
.attr("width", rectSize)
.attr("height", rectSize)
.style("fill","powderBlue")
.attr("id", "hello")
.attr("title", "hello")
.style("fixed","true")
//.text("hello")
.on("mousedown",
function(d) {
// disable zoom
vis.call(d3.behavior.zoom().on("zoom"), null);
mousedown_node = d;
if (mousedown_node == selected_node) selected_node = null;
else selected_node = mousedown_node;
selected_link = null;
// reposition drag line
drag_line
.attr("class", "link")
.attr("x1", mousedown_node.x)
.attr("y1", mousedown_node.y)
.attr("x2", mousedown_node.x)
.attr("y2", mousedown_node.y);
redraw();
})
.on("mousedrag",
function(d) {
// redraw();
})
.on("mouseup",
function(d) {
if (mousedown_node) {
mouseup_node = d;
if (mouseup_node == mousedown_node) { resetMouseVars(); return; }
// add link
var link = {source: mousedown_node, target: mouseup_node};
links.push(link);
// select new link
selected_link = link;
selected_node = null;
// enable zoom
vis.call(d3.behavior.zoom().on("zoom"), rescale);
redraw();
}
})
.transition()
.duration(750)
.ease("elastic")
//.attr("r", 6.5);
.attr("width", rectSize+1)
.attr("height", rectSize+1);
node.exit().transition()
//.attr("r", 0)
.remove();
node
.classed("node_selected", function(d) { return d === selected_node; });
if (d3.event) {
// prevent browser's default behavior
d3.event.preventDefault();
}
force.start();
}
function spliceLinksForNode(node) {
toSplice = links.filter(
function(l) {
return (l.source === node) || (l.target === node); });
toSplice.map(
function(l) {
links.splice(links.indexOf(l), 1); });
}
function keydown() {
if (!selected_node && !selected_link) return;
switch (d3.event.keyCode) {
case 8: // backspace
case 46: { // delete
if (selected_node) {
nodes.splice(nodes.indexOf(selected_node), 1);
spliceLinksForNode(selected_node);
}
else if (selected_link) {
links.splice(links.indexOf(selected_link), 1);
}
selected_link = null;
selected_node = null;
redraw();
break;
}
}
}
</script>
</body>
</html>
// Here to update the text
node.selectAll('text')
.text(function(d){ //what you want to do on update }
// Here the creation
rect.append('svg:text')
.text('Hello wold')
// your node update
node.selectAll('rect')
// do what you want on update
// your node enter
var g = node.enter().append('svg:g')
g.append('svg:rect')
// all of your stuff
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}