本文介绍了在D3中插入换行符强制布局节点标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以，我正在使用强制有向图，我已经使我的节点上的.text在鼠标上从数据更改为另一个文本。
我的代码如下：
脚本：
var data = { nodes：[
{name：YHO，full_name：Yahoo，type：1，slug：www.yahoo.com，entity：company ，img_hrefD：，img_hrefL：}，
{name：GGL，full_name：Google，type：2，slug：www 。，b_name：Bing，entity：company，img_hrefD：，img_hrefL： type：2，slug：www.bing.com，entity：company，img_hrefD：，img_hrefL：}，
{name： YDX，full_name：Yandex，type：2，slug：www.yandex.com，entity：company，img_hrefD：，img_hrefL： }，
{name：Desc1，type：4，slug：，entity ：Desc2，type：4，slug：，entity：description}，
{name： ，entity：description}，
{name：CEO，prefix：Mr。，fst_name：Jim，snd_name： Bean，type：3，slug：，entity：employee}，
{name：ATT，prefix：Ms。 ：Jenna，snd_name：Jameson，type：3，slug：，entity：employee}，
{name：CTO prefix：Mr。，fst_name：Lucky，snd_name：Luke，type：3，slug：，entity：employee}，
{name：CDO，prefix：Ms。，fst_name：Pamela，snd_name：Anderson，type：3，slug： ：employee}，
{name：CEO，prefix：Mr。，fst_name：Nacho，snd_name：Vidal slug：，entity：employee}，
]，
links：[
{source：0，target：4， ：1，distance：5}，
{source：0，target：5，value：1， 0，target：6，value：1，distance：5}，
{source：1，target：4，value ：5}，
{source：2，target：5，value：1，distance：5}，
{source：3，target 6，value：1，distance：5}，
{source：7，target：3，value：10，distance：6} b $ b {source：8，target：3，value：10，distance：6}，
{source：9，target：1，value 10，distance：6}，
{source：10，target：1，value：10， target：2，value：10，distance：6}，
]
}
var w =
h = 500，
radius = d3.scale.log（）。domain（[0，312000]）。range（[10，50]）;
var vis = d3.select（body）append（svg：svg）
.attr（width，w）
.attr ， H）;
//vis.append(\"defs\").append(\"marker）
//.attr(\"id，arrowhead）
//.attr （refX，22 + 3）/ *必须以更聪明的方式计算shift * /
//.attr(\"refY，2）
//.attr(\"markerWidth
//.attr(\"markerHeight，4）
//.attr(\"orient，auto）
//.append(\"path）
/ /.attr(\"d，M 0,0 V 4 L6,2 Z）; //这是箭头的实际形状
//d3.json（data，function（json）{
var force = self.force = d3.layout.force（）
.nodes（data.nodes）
.links（data.links）
.linkDistance（function（d）{return（d.distance * 10）;}）
//.friction （0.5）
.charge（-250）
.size（[w，h]）
.start（）;
$ b b var link = vis.selectAll（line.link）
.data（data.links）
.enter（）。append（svg：line）
.attr class，function（d）{returnlink+ d.value +;}）
.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;}）
.attr（marker-end，function（d）{
if（d.value = = 1）{returnurl（#arrowhead）}
else {return}
;}）;
function openLink（）{
return function（d）{
var url =;
if（d.slug！=）{
url = d.slug
} // else if（d.type == 2）{
// url = clients /+ d.slug
//} else if（d.type == 3）{
// url =agencies /+ d.slug
//} b $ b window.open（//+ url）
}
}
var node = vis.selectAll （g.node）
.data（data.nodes）
.enter（）。append（svg：g）
.attr（class，node）
.call（force.drag）;
node.append（circle）
.attr（class，function（d）{returnnode type+ d.type}）
.attr（r，function（d）{if（d.entity ==description）{return 6} else {return 18}}）
//.on(\"mouseover，expandNode） ;
//.style(\"fill，function（d）{return fill（d.type）;}）
node.append（svg ：image）
.attr（class，function（d）{returncircle img _+ d.name}）
.attr（xlink：href，function（d）{return d.img_hrefD}）
.attr（x，-36px）
.attr（y，-36px）
.attr（width，70px ）
.attr（height，70px）
.on（click，openLink（））
。 d.entity ==company）
{
d3.select（this）.attr（width，90px）
.attr（x，-46px ）
.attr（y，-36.5px）
.attr（xlink：href，function（d）{return d.img_hrefL}）;
}
}）
.on（mouseout，function（d）{if（d.entity ==company）
{
d3.select width，70px）
.attr（x，-36px）
.attr（y，-36px）
.attr（xlink：href ，function（d）{return d.img_hrefD}）;
}
}）;
node.append（svg：text）
.attr（class，function（d）{returnnodetext title _+ d.name}） b $ b .attr（dx，0）
.attr（dy，.35em）
.style（font-size，10px）
。 attr（text-anchor，middle）
.style（fill，white）
.text（function（d）{if（d.entity！=description） {return d.name}}）;
node.on（mouseover，function（d）{
if（d.entity ==company）{
d3.select ）.select（'text'）
.transition（）
.duration（300）
.text（function（d）{
return d.full_name;
}
.style（font-size，15px）
}
else if（d.entity ==employee）{
d3 .select（this）.select（'text'）
.transition（）
.duration（300）
.text（function（d）{return d.prefix +''+ d .fst_name +''+ d.snd_name}）
.style（font-size，8px）
}
else {
d3.select （this）.select（'text'）
.transition（）
.duration（300）
.style（font-size，15px）
}
if（d.entity ==company）{
d3.select（this）.select（'image'）
.attr（width，90px ）
.attr（x，-46px）
.attr（y，-36.5px）
.attr（xlink：href，function ）{
return d.img_hrefL
}）;
}
if（d.entity ==company）{
d3.select（this）.select（'circle'）
.transition（）
.duration（300）
.attr（r，28）
}
else if（d.entity ==employee ）{
d3.select（this）.select（'circle'）
.transition（）
.duration（300）
.attr（r，32）
}
}）
node.on（mouseout，function（d）{
if（d.entity ==company） {
d3.select（this）.select（'text'）
.transition（）
.duration（300）
.text（function（d）{return d。 name;}）
.style（font-size，10px）
}
else if（d.entity ==employee）{
d3.select （this）.select（'text'）
.transition（）
.duration（300）
.text（function（d）{return d.name;}）
.style（font-size，10px）
}
else {
d3.select（this）.select（'text'）
。 transition（）
.duration（300）
.style（font-size，10px）
}
if实体==公司）{
d3.select（this）.select（'image'）
.attr（width，70px）
.attr ，-36px）
.attr（y，-36px）
.attr（xlink：href，function（d）{
return d.img_hrefD
}）;
}
if（d.entity ==company|| d.entity ==employee）{
d3.select（this） select（'circle'）
.transition（）
.duration（300）
.attr（r，18）
}
} ）;
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）{returntranslate +，+ dy +）;}）;
}）;
//}）;
您可以在我的jsfiddle中看到工作示例：
困扰我的代码部分是mouseover：
else if（d.entity ==employee）{pre>
d3 .select（this）.select（'text'）
.transition（）
.duration（300）
.text（function（d）{return d.prefix +''+ d .fst_name +''+ d.snd_name}）
.style（font-size，8px）
}
我想在
d.fst_name和d.snd_name之间添加换行符并尝试使用'\\\和
''< \br>'它不是我想要得到的...
d3在文本上添加换行符的方式是什么？
您可以在上面编辑我的链接jsfiddle ...
欢迎任何建议
解决方案这里的答案不使用HTML内部SVG，因为某种原因，它不会与这个强制的东西。
else if（d.entity ==employee）{
var asdf = d3.select（this）;
asdf.select（'text'）。remove（）;
asdf.append（text）
.text（function（d）{return d.prefix +''+ d.fst_name}）
.attr ，nodetext）
.attr（dx，0）
.attr（dy，.35em）
.style（font-size，5px ）
.attr（text-anchor，middle）
.style（fill，white）
.transition（）
。 ）
.style（font-size，12px）;
asdf.append（text）。text（function（d）{return d.snd_name}）
.attr（class，nodetext）
。 attr（transform，translate（0，12））
.attr（dx，0）
.attr（dy，.35em）
.style （font-size，5px）
.attr（text-anchor，middle）
.style（fill，white）
.transition ）
.duration（300）
.style（font-size，12px）;
}
Jsfiddle示例：
So, I am playing with force directed graph, and I've made that .text on my node changes on mouse over to another text from data.
My code looks like this:
script:
var data = {"nodes":[ {"name":"YHO", "full_name":"Yahoo", "type":1, "slug": "www.yahoo.com", "entity":"company", "img_hrefD":"", "img_hrefL":""}, {"name":"GGL", "full_name":"Google", "type":2, "slug": "www.google.com", "entity":"company", "img_hrefD":"", "img_hrefL":""}, {"name":"BNG", "full_name":"Bing", "type":2, "slug": "www.bing.com", "entity":"company", "img_hrefD":"", "img_hrefL":""}, {"name":"YDX", "full_name":"Yandex", "type":2, "slug": "www.yandex.com", "entity":"company", "img_hrefD":"", "img_hrefL":""}, {"name":"Desc1", "type":4, "slug": "", "entity":"description"}, {"name":"Desc2", "type":4, "slug": "", "entity":"description"}, {"name":"Desc4", "type":4, "slug": "", "entity":"description"}, {"name":"CEO", "prefix":"Mr.", "fst_name":"Jim", "snd_name":"Bean", "type":3, "slug": "", "entity":"employee"}, {"name":"ATT", "prefix":"Ms.", "fst_name":"Jenna", "snd_name":"Jameson", "type":3, "slug": "", "entity":"employee"}, {"name":"CTO", "prefix":"Mr.", "fst_name":"Lucky", "snd_name":"Luke", "type":3, "slug": "", "entity":"employee"}, {"name":"CDO", "prefix":"Ms.", "fst_name":"Pamela", "snd_name":"Anderson", "type":3, "slug": "", "entity":"employee"}, {"name":"CEO", "prefix":"Mr.", "fst_name":"Nacho", "snd_name":"Vidal", "type":3, "slug": "", "entity":"employee"}, ], "links":[ {"source":0,"target":4,"value":1,"distance":5}, {"source":0,"target":5,"value":1,"distance":5}, {"source":0,"target":6,"value":1,"distance":5}, {"source":1,"target":4,"value":1,"distance":5}, {"source":2,"target":5,"value":1,"distance":5}, {"source":3,"target":6,"value":1,"distance":5}, {"source":7,"target":3,"value":10,"distance":6}, {"source":8,"target":3,"value":10,"distance":6}, {"source":9,"target":1,"value":10,"distance":6}, {"source":10,"target":1,"value":10,"distance":6}, {"source":11,"target":2,"value":10,"distance":6}, ] } var w = 560, h = 500, radius = d3.scale.log().domain([0, 312000]).range(["10", "50"]); var vis = d3.select("body").append("svg:svg") .attr("width", w) .attr("height", h); //vis.append("defs").append("marker") //.attr("id", "arrowhead") //.attr("refX", 22 + 3) /*must be smarter way to calculate shift*/ //.attr("refY", 2) //.attr("markerWidth", 6) //.attr("markerHeight", 4) //.attr("orient", "auto") //.append("path") //.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead //d3.json(data, function(json) { var force = self.force = d3.layout.force() .nodes(data.nodes) .links(data.links) .linkDistance(function(d) { return (d.distance*10); }) //.friction(0.5) .charge(-250) .size([w, h]) .start(); var link = vis.selectAll("line.link") .data(data.links) .enter().append("svg:line") .attr("class", function (d) { return "link" + d.value +""; }) .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; }) .attr("marker-end", function(d) { if (d.value == 1) {return "url(#arrowhead)"} else { return " " } ;}); function openLink() { return function(d) { var url = ""; if(d.slug != "") { url = d.slug } //else if(d.type == 2) { //url = "clients/" + d.slug //} else if(d.type == 3) { //url = "agencies/" + d.slug //} window.open("//"+url) } } var node = vis.selectAll("g.node") .data(data.nodes) .enter().append("svg:g") .attr("class", "node") .call(force.drag); node.append("circle") .attr("class", function(d){ return "node type"+d.type}) .attr("r",function(d){if(d.entity == "description"){ return 6 } else { return 18 }}) //.on("mouseover", expandNode); //.style("fill", function(d) { return fill(d.type); }) node.append("svg:image") .attr("class", function(d){ return "circle img_"+d.name }) .attr("xlink:href", function(d){ return d.img_hrefD}) .attr("x", "-36px") .attr("y", "-36px") .attr("width", "70px") .attr("height", "70px") .on("click", openLink()) .on("mouseover", function (d) { if(d.entity == "company") { d3.select(this).attr("width", "90px") .attr("x", "-46px") .attr("y", "-36.5px") .attr("xlink:href", function(d){ return d.img_hrefL}); } }) .on("mouseout", function (d) { if(d.entity == "company") { d3.select(this).attr("width", "70px") .attr("x", "-36px") .attr("y", "-36px") .attr("xlink:href", function(d){ return d.img_hrefD}); } }); node.append("svg:text") .attr("class", function(d){ return "nodetext title_"+d.name }) .attr("dx", 0) .attr("dy", ".35em") .style("font-size","10px") .attr("text-anchor", "middle") .style("fill", "white") .text(function(d) { if (d.entity != "description"){return d.name} }); node.on("mouseover", function (d) { if (d.entity == "company"){ d3.select(this).select('text') .transition() .duration(300) .text(function(d){ return d.full_name; }) .style("font-size","15px") } else if(d.entity == "employee"){ d3.select(this).select('text') .transition() .duration(300) .text(function(d){return d.prefix + ' ' + d.fst_name + ' ' + d.snd_name}) .style("font-size","8px") } else { d3.select(this).select('text') .transition() .duration(300) .style("font-size","15px") } if (d.entity == "company") { d3.select(this).select('image') .attr("width", "90px") .attr("x", "-46px") .attr("y", "-36.5px") .attr("xlink:href", function (d) { return d.img_hrefL }); } if (d.entity == "company") { d3.select(this).select('circle') .transition() .duration(300) .attr("r",28) } else if (d.entity == "employee"){ d3.select(this).select('circle') .transition() .duration(300) .attr("r",32) } }) node.on("mouseout", function (d) { if (d.entity == "company") { d3.select(this).select('text') .transition() .duration(300) .text(function(d){return d.name;}) .style("font-size","10px") } else if(d.entity == "employee"){ d3.select(this).select('text') .transition() .duration(300) .text(function(d){return d.name;}) .style("font-size","10px") } else { d3.select(this).select('text') .transition() .duration(300) .style("font-size","10px") } if (d.entity == "company") { d3.select(this).select('image') .attr("width", "70px") .attr("x", "-36px") .attr("y", "-36px") .attr("xlink:href", function (d) { return d.img_hrefD }); } if (d.entity == "company" || d.entity == "employee") { d3.select(this).select('circle') .transition() .duration(300) .attr("r",18) } }); 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 + ")"; }); }); //});You can see working example in my jsfiddle: http://jsfiddle.net/dzorz/6pHkn/
The part of code which bothers me is that mouseover:
else if(d.entity == "employee"){ d3.select(this).select('text') .transition() .duration(300) .text(function(d){return d.prefix + ' ' + d.fst_name + ' ' + d.snd_name}) .style("font-size","8px") }I wanna add a line break between
d.fst_nameandd.snd_nameand I tried with'\n'and'<\br>'and it was not doing what I wanted to get...Which is the way in d3 to add line break on text?
You can edit my linked jsfiddle above...
Any suggestion is welcome
解决方案Here is answer without using HTML inside SVG because for some reason it wont work with this force stuff.
else if(d.entity == "employee"){ var asdf = d3.select(this); asdf.select('text').remove(); asdf.append("text") .text(function(d){return d.prefix + ' ' + d.fst_name }) .attr("class","nodetext") .attr("dx", 0) .attr("dy", ".35em") .style("font-size","5px") .attr("text-anchor", "middle") .style("fill", "white") .transition() .duration(300) .style("font-size","12px"); asdf.append("text").text(function(d){return d.snd_name }) .attr("class","nodetext") .attr("transform","translate(0, 12)") .attr("dx", 0) .attr("dy", ".35em") .style("font-size","5px") .attr("text-anchor", "middle") .style("fill", "white") .transition() .duration(300) .style("font-size","12px"); }Jsfiddle example: http://jsfiddle.net/cuckovic/FWKt5/
这篇关于在D3中插入换行符强制布局节点标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！