Javascript 如何包装文本以适应d3中的屏幕?
我是一个使用d3作为可视化的新手。 这是我的可视化文档集群的程序。 文档的标题太长,屏幕无法显示整个标题,因此我想将每个成员的标题标签包装起来 以下是d3代码:Javascript 如何包装文本以适应d3中的屏幕?,javascript,d3.js,word-wrap,Javascript,D3.js,Word Wrap,我是一个使用d3作为可视化的新手。 这是我的可视化文档集群的程序。 文档的标题太长,屏幕无法显示整个标题,因此我想将每个成员的标题标签包装起来 以下是d3代码: var CodeFlower = function(selector, w, h) { this.w = w; this.h = h; d3.select(selector).selectAll("svg").remove(); this.svg = d3.select(selector).append("svg:
var CodeFlower = function(selector, w, h) {
this.w = w;
this.h = h;
d3.select(selector).selectAll("svg").remove();
this.svg = d3.select(selector).append("svg:svg")
.attr('width', w)
.attr('height', h);
this.svg.append("svg:rect")
.style("stroke", "#6BB6CF")
.style("fill", "#6BB6CF")
.attr('width', "615px")
.attr('height', h);
this.force = d3.layout.force()
.on("tick", this.tick.bind(this))
.charge(function(d) { return d._children ? -d.size / 100 : -40; })
.linkDistance(function(d) { return d.target._children ? 80 : 25; })
.size([h, w]);
};
CodeFlower.prototype.update = function(json) {
if (json) this.json = json;
this.json.fixed = true;
this.json.x = this.w / 2;
this.json.y = this.h / 2;
var nodes = this.flatten(this.json);
var links = d3.layout.tree().links(nodes);
var total = nodes.length || 1;
// remove existing text (will readd it afterwards to be sure it's on top)
this.svg.selectAll("text").remove();
// Restart the force layout
this.force
.gravity(Math.atan(total / 50) / Math.PI * 0.4)
.nodes(nodes)
.links(links)
.start();
// Update the links
this.link = this.svg.selectAll("line.link")
.data(links, function(d) { return d.target.name; });
// Enter any new links
this.link.enter().insert("svg:line", ".node")
.attr("class", "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; });
// Exit any old links.
this.link.exit().remove();
// Update the nodes
this.node = this.svg.selectAll("circle.node")
.data(nodes, function(d) { return d.name; })
.classed("collapsed", function(d) { return d._children ? 1 : 0; });
this.node.transition()
.attr("r", function(d) { return d.children ? 3.5 : Math.pow(d.size, 2/5) || 1; });
// Enter any new nodes
this.node.enter().append('svg:circle')
.attr("class", "node")
.classed('directory', function(d) { return (d._children || d.children) ? 1 : 0; })
.attr("r", function(d) { return d.children ? 3.5 : Math.pow(d.size, 2/5) || 1; })
.style("fill", function color(d) {
return "hsl(" + parseInt(360 / total * d.id, 10) + ",90%,70%)";
})
.call(this.force.drag)
.on("click", this.click.bind(this))
.on("mouseover", this.mouseover.bind(this))
.on("mouseout", this.mouseout.bind(this));
// Exit any old nodes
this.node.exit().remove();
this.text = this.svg.append('svg:text')
.attr('class', 'nodetext')
.attr('dy', 0)
.attr('dx', 0)
.attr('text-anchor', 'middle');
return this;
};
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);
}
}
});
}
function type(d) {
d.value = +d.value;
return d;
}
CodeFlower.prototype.flatten = function(root) {
var nodes = [], i = 0;
function recurse(node) {
if (node.children) {
node.size = node.children.reduce(function(p, v) {
return p + recurse(v);
}, 0);
}
if (!node.id) node.id = ++i;
nodes.push(node);
return node.size;
}
root.size = recurse(root);
return nodes;
};
CodeFlower.prototype.click = function(d) {
// Toggle children on click.
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
this.update();
};
CodeFlower.prototype.mouseover = function(d) {
this.text.attr('transform', 'translate(' + d.x + ',' + (d.y - 5 - (d.children ? 3.5 : Math.sqrt(d.size) / 2)) + ')')
.text(d.name)
.style('display', null);
};
CodeFlower.prototype.mouseout = function(d) {
this.text.style('display', 'none');
};
CodeFlower.prototype.tick = function() {
var h = this.h;
var w = this.w;
this.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; });
this.node.attr("transform", function(d) {
return "translate(" + Math.max(5, Math.min(w - 5, d.x)) + "," + Math.max(5, Math.min(h - 5, d.y)) + ")";
});
};
CodeFlower.prototype.cleanup = function() {
this.update([]);
this.force.stop();
};
我在一些网站上尝试过包装文本功能,但它不起作用。
非常感谢您的帮助:)如果您设置了宽度和高度,您可以在SVG中使用html元素来利用自动换行功能
首先,需要在SVG中添加一个
标记。然后,您可以开始将html元素附加到
,同时指定html名称空间.append(“xhtml:div”)
如果要使用Mike Bostock的wrap
函数,您必须调用它:
var foo = svg.append("text")
.attr("y", someValue)
.attr("dy", 0)
.text("foo bar baz")
.call(wrap, textWidth);//some value here
您可以直接设置y位置,并使用“变换”设置x位置(除非您在wrap
函数中更改
的“x”属性)
下面是一个演示:
var svg=d3.选择(“svg”);
var text=svg.append(“文本”)
.attr(“y”,20)
.attr(“dy”,0)
.attr(“转换”、“翻译(10,0)”)
.text(“这个纯SVG文本元素实际上是一个很长的文本。”)
.电话(wrap,280);
函数换行(文本、宽度){
text.each(函数(){
变量文本=d3。选择(此),
words=text.text().split(/\s+/).reverse(),
单词
行=[],
行号=0,
线宽=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()){
行。推(字);
tspan.text(line.join(“”));
if(tspan.node().getComputedTextLength()>width){
line.pop();
tspan.text(line.join(“”));
行=[字];
tspan=text.append(“tspan”).attr(“x”,0).attr(“y”,y).attr(“dy”,++lineNumber*lineHeight+dy+“em”).text(word);
}
}
});
}
您能否用一些示例数据更新您的问题,以及如何创建CodeFlower
对象?您的回答让OP相信您可以将HTML元素附加到指定名称空间的SVG中,这是不正确的。在代码段中,您使用的是foreignObject
,您在回答中没有提到它,也没有使用您提到的名称空间。除此之外,foreignObject
将不适用于IE。然而,它被升级了。。。去想办法。