在D3中插入换行符强制布局节点标签 [英] Inserting a line break in D3 force layout node labels
本文介绍了在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中看到工作示例： http://jsfiddle.net/dzorz/6pHkn/
困扰我的代码部分是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示例： http://jsfiddle.net/cuckovic/FWKt5/
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中插入换行符强制布局节点标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
