将文本从json断开为几行，用于在D3力布局中显示标签 [英] Breaking text from json into several lines for displaying labels in a D3 force layout
问题描述
我是新的d3.js和编码一般。这是我的问题：
我试图找到一种方法来打破长布局对象的长行显示的名称。
我想能够确定在哪里打破这些行，我猜这是可能从json文件中完成。
我知道已经有类似的问题，但我只是不能找到在哪里放置代码或为什么我以前的尝试没有成功。这是我有的代码：
var width = 960，
height = 800，
root ;
var force = d3.layout.force（）
.linkDistance（120）
.charge（-600）
.gravity（.06）
.size（[width，height]）
.on（tick，tick）;
var svg = d3.select（body）append（svg）
.attr（width，width）
.attr高度）;
var link = svg.selectAll（。link），
node = svg.selectAll（。node）;
d3.json（graph.json，function（error，json）{
root = json;
update（）;
}
function update（）{
var nodes = flatten（root），
links = d3.layout.tree（）。
//重新启动强制布局。
force
.nodes（nodes）
.links（links）
.start（）;
//更新链接。
link = link.data（links，function（d）{return d.target.id;}）;
link.exit（）。remove（）;
link.enter（）。insert（line，.node）
.attr（class，link）
//更新节点。
node = node.data（nodes，function（d）{return d.id;}）;
node.exit（）。remove（）;
var nodeEnter = node.enter（）。append（g）
.attr（class，node）
.on ）
.call（force.drag）;
nodeEnter.append（circle）
.attr（r，function（d）{return Math.sqrt（d.size）/ 3 || 10;}）;
nodeEnter.append（text）
.attr（dy，0.3em）
.text（function（d）{return d.name;} ）;
node.select（circle）
.style（fill，color）;
}
//划分文本
text.append（text）
.each（function（d）{
var arr = d.name.split（）;
if（arr！= undefined）{
for（i = 0; i
.text（arr [i]）
.attr（dy，i？1.2em：0）
.attr x，0）
.attr（text-anchor，middle）
.attr（class，tspan+ i）;
}
}
}）;
//分割文本
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（transform，function（d）{returntranslate（+ d.x +，+ d.y +）;
}
函数color（d）{
return d._children？ ＃9ecae1//折叠包
：d.children？ #ffffff// expanded package
：＃ffcc50; //叶节点
}
//点击切换子节点。
function click（d）{
if（d3.event.defaultPrevented）return; // ignore drag
if（d.children）{
d._children = d.children;
d.children = null;
} else if（d._children）{
d.children = d._children;
d._children = null;
} else {
//这是一个叶节点，所以重定向。
window.open（d.url，'popUpWindow'，'height = 600，width = 800，left = 10，top = 10，resizable = yes，scrollbars = no，toolbar = no，menubar = no，location = no，directories = no，status = yes'）;
}
update（）;
}
//返回根下所有节点的列表。
function flatten（root）{
var nodes = []，i = 0;
function recurse（node）{
if（node.children）node.children.forEach（recurse）;
if（！node.id）node.id = ++ i;
nodes.push（node）;
}
recurse（root）;
返回节点;
}
这是json的信息：
{
name：flare，
children：[
{
name analytics，
children：[
{
name：cluster，
children：[
{name： Cluster，size：3938}，
{name：Community Structure，size：3812}，
{name： }，
{name：Merge Edge，size：743}
]
}，
{
name：graph
children：[
{name：Betweenness Centrality，size：3534}，
{name：Link Distance，size：5731} ，
{name：Shortest Paths，size：5914}，
{name：Max Flow Min Cut，size：7840} name：Spanning Tree，size：3416}
]
}，
{
name：optimization ：[
{name：Aspect Ratio Banker，size：7074}
]
}
]
}
] $ b 我希望能够决定，例如打破纵横比银行家或纵横比/银行家。
我相信这个例子在 jsfiddle 解决了您的问题。
代码实际上就是您的例子，只是稍作修改。
有一个新的函数wordwrap2（）来处理正确的分裂：
function wordwrap2（str，width，brk，cut）{
brk = brk || '\\\
';
width = width || 75;
cut = cut ||假;
if（！str）{return str; }
var regex ='。{1，'+ width +'}（\\s | $）'+（cut？'|。{'+ width +'} |。+ $'：' \\\S +？（\\s | $）'）;
return str.match（RegExp（regex，'g'））.join（brk）;
}
然后，有一个新的重要部分代码，为每个节点创建一个文本标签，创建：
var maxLength = 20;
var separation = 18;
var textX = 0;
nodeEnter.append（text）
.attr（dy，0.3em）
.each（function（d）{
var lines = wordwrap2 .name，maxLength）.split（'\\\
'）;
console.log（d.name）;
console.log（lines）;
for（var i = 0; i< lines.length; i ++）{
d3.select（this）
.append（tspan）
.attr（dy，separation）
.attr （x，textX）
.text（lines [i]）;
}
}）;
（变量maxLength - 用于分割名称的条件的长度）
（可变分隔 - 名称拆分线之间的视觉垂直距离）
例如，这将是maxLength = 20的输出：
这将是maxLength = 15的输出：（注意Aspect Ratio Banker成为Aspect Ratio / Banker）
这将是maxLength = 10的输出：检查长宽比/比率/银行家！）
这将是maxLength = 10和分隔= 30的输出（每行之间多一点空格）：
I am new to d3.js and coding in general. This is my question:
I am trying to find a way to break long displayed names of force layout objects in lines.
I would like to be able to determine where to break these lines, and I am guessing this is something that might be possible to be done from the json file.
I am aware that there have been similar questions asked already, but I just can't find where to put the code or why my previous attempts haven't been successful. This is the code that I have:
var width = 960,
height = 800,
root;
var force = d3.layout.force()
.linkDistance(120)
.charge(-600)
.gravity(.06)
.size([width, height])
.on("tick", tick);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
d3.json("graph.json", function(error, json) {
root = json;
update();
});
function update() {
var nodes = flatten(root),
links = d3.layout.tree().links(nodes);
// Restart the force layout.
force
.nodes(nodes)
.links(links)
.start();
// Update links.
link = link.data(links, function(d) { return d.target.id; });
link.exit().remove();
link.enter().insert("line", ".node")
.attr("class", "link");
// Update nodes.
node = node.data(nodes, function(d) { return d.id; });
node.exit().remove();
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.on("click", click)
.call(force.drag);
nodeEnter.append("circle")
.attr("r", function(d) { return Math.sqrt(d.size) / 3 || 10; });
nodeEnter.append("text")
.attr("dy", "0.3em")
.text(function(d) { return d.name; });
node.select("circle")
.style("fill", color);
}
// Divide text
text.append("text")
.each(function (d) {
var arr = d.name.split(" ");
if (arr != undefined) {
for (i = 0; i < arr.length; i++) {
d3.select(this).append("tspan")
.text(arr[i])
.attr("dy", i ? "1.2em" : 0)
.attr("x", 0)
.attr("text-anchor", "middle")
.attr("class", "tspan" + i);
}
}
});
// Divide text
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function color(d) {
return d._children ? "#9ecae1" // collapsed package
: d.children ? "#ffffff" // expanded package
: "#ffcc50"; // leaf node
}
// Toggle children on click.
function click(d) {
if (d3.event.defaultPrevented) return; // ignore drag
if (d.children) {
d._children = d.children;
d.children = null;
} else if (d._children) {
d.children = d._children;
d._children = null;
} else {
// This was a leaf node, so redirect.
window.open(d.url, 'popUpWindow','height=600,width=800,left=10,top=10,resizable=yes,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes');
}
update();
}
// Returns a list of all nodes under the root.
function flatten(root) {
var nodes = [], i = 0;
function recurse(node) {
if (node.children) node.children.forEach(recurse);
if (!node.id) node.id = ++i;
nodes.push(node);
}
recurse(root);
return nodes;
}
And this is the json info:
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"name": "Agglomerative Cluster", "size": 3938},
{"name": "Community Structure", "size": 3812},
{"name": "Hierarchical Cluster", "size": 6714},
{"name": "Merge Edge", "size": 743}
]
},
{
"name": "graph",
"children": [
{"name": "Betweenness Centrality", "size": 3534},
{"name": "Link Distance", "size": 5731},
{"name": "Max Flow Min Cut", "size": 7840},
{"name": "Shortest Paths", "size": 5914},
{"name": "Spanning Tree", "size": 3416}
]
},
{
"name": "optimization",
"children": [
{"name": "Aspect Ratio Banker", "size": 7074}
]
}
]
}
]
I would like to be able to decide, for example, to break Aspect / Ratio Banker or Aspect Ratio / Banker.
I believe this example on jsfiddle solves your problem.
The code is actually your example, just a little bit modified.
There is a new function wordwrap2() that takes care of proper splitting of the names:
function wordwrap2( str, width, brk, cut ) {
brk = brk || '\n';
width = width || 75;
cut = cut || false;
if (!str) { return str; }
var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : '|\\S+?(\\s|$)');
return str.match( RegExp(regex, 'g') ).join( brk );
}
Then, there is a new important part of the code that, instead of just creating one text label per node, creates this:
var maxLength = 20;
var separation = 18;
var textX = 0;
nodeEnter.append("text")
.attr("dy", "0.3em")
.each(function (d) {
var lines = wordwrap2(d.name, maxLength).split('\n');
console.log(d.name);
console.log(lines);
for (var i = 0; i < lines.length; i++) {
d3.select(this)
.append("tspan")
.attr("dy", separation)
.attr("x", textX)
.text(lines[i]);
}
});
(variable maxLength - length used for criterium for splitting names)
(variable separation - visual vertical distance between split lines of a name)
For example this would be the output for maxLength=20:
This would be the output for maxLength=15: (notice that Aspect Ratio Banker became Aspect Ratio/Banker)
This would be the output for maxLength=10: (now, check out Aspect/Ratio/Banker !)
And this would be the output for maxLength=10 and separation=30 (a little more space between individual lines):
这篇关于将文本从json断开为几行，用于在D3力布局中显示标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
