如何通过在d3 js中固定矩形框的宽度来动态增加高度
我正在使用d3 js折叠树。 我想修复矩形的宽度。 如果矩形框中的文本大小超过rect框的固定宽度，如何动态增加rect框的高度？
如下图所示我想要输出。
以下是我正在使用的代码
.node {
cursor: pointer;
border-style: solid;
border-width: 2px 10px 4px 20px;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node rect {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var treeData = [
{
"name": "Top Level",
"parent": "null",
"children": [
{
"name": "Level 2: A. Some text here Some text here Some text here",
"parent": "Top Level",
"children": [
{
"name": "Son of A",
"parent": "Level 2: A"
},
{
"name": "Daughter of A",
"parent": "Level 2: A"
}
]
},
{
"name": "Level 2: B",
"parent": "Top Level"
}
]
}
];
// ************** Generate the tree diagram *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 960 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.source(function (d) {
return {
"x": d.source.x,
"y": d.source.y + 150
};
})
.projection(function (d) { return [d.y + 0, d.x + 0];
});
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;
update(root);
d3.select(self.frameElement).style("height", "500px");
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click);
nodeEnter.append("rect")
.attr("x", function(d) { return d.children || d._children ? 0 : 0; })
.attr("y", function(d) { return d.children || d._children ? 15 : 15; })
.attr("rx", 10)
.attr("ry", 10)
.attr("width", 10)
.attr("height", 10)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnter.append("text")
.attr("x", 60)
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("rect")
.attr("x", function(d) { return d.children || d._children ? 0 : 0; })
.attr("y", function(d) { return d.children || d._children ? -15 : -15; })
.attr("rx", 10)
.attr("ry", 10)
.attr("width", 150)
.attr("height", 30)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeUpdate.select("text")
.style("fill-opacity", 1)
.attr("text-anchor", "middle");
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("rect")
.attr("x", function(d) { return d.children || d._children ? 0 : 0; })
.attr("y", function(d) { return d.children || d._children ? 15 : 15; })
.attr("rx", 10)
.attr("ry", 10)
.attr("width", 10)
.attr("height", 10);
nodeExit.select("text")
.style("fill-opacity", 1e-6)
.attr("text-anchor", "middle");
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("fill", "none")
.attr("stroke", "black")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
</script>
2 个答案:
答案 0 :(得分：0)
只是一个肤浅的尝试。
- 首先添加所有文本元素
- 使用tspans 将文本元素包装在一定宽度内
- 获取文本元素的高度并将其作为属性存储在数据本身中
- 使用stored属性设置矩形的高度
包装文字here的参考。您始终可以编写自定义包装功能。
希望这有帮助
＆＃13;
＆＃13;
＆＃13;
＆＃13;
var treeData = [
{
"name": "Top Level",
"parent": "null",
"children": [
{
"name": "Level 2: A. Some text here Some text here Some text here Some text here",
"parent": "Top Level",
"children": [
{
"name": "Son of A Some text here Some text here",
"parent": "Level 2: A"
},
{
"name": "Daughter of A Some text here Some text here Some text here Some text here Some text here",
"parent": "Level 2: A"
}
]
},
{
"name": "Level 2: B Some text here Some text here Some text here",
"parent": "Top Level"
}
]
}
];
// ************** Generate the tree diagram *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 960 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.source(function (d) {
return {
"x": d.source.x,
"y": d.source.y + 150
};
})
.projection(function (d) { return [d.y + 0, d.x + 0];
});
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;
update(root);
d3.select(self.frameElement).style("height", "500px");
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click);
nodeEnter.append("rect")
.attr("x", function(d) { return d.children || d._children ? 0 : 0; })
.attr("y", function(d) { return d.children || d._children ? 15 : 15; })
.attr("rx", 10)
.attr("ry", 10)
.attr("width", 10)
.attr("height", 10)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnter.append("text")
.attr("x", 60)
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6)
.each(function(d) {
calculateTextWrap(this,d);
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("rect")
.attr("x", function(d) { return d.children || d._children ? 0 : 0; })
.attr("y", function(d) { return d.children || d._children ? -15 : -15; })
.attr("rx", 10)
.attr("ry", 10)
.attr("width", 150)
.attr("height", function(d) { return d.rectHeight})
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeUpdate.select("text")
.style("fill-opacity", 1)
.attr("text-anchor", "middle");
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("rect")
.attr("x", function(d) { return d.children || d._children ? 0 : 0; })
.attr("y", function(d) { return d.children || d._children ? 15 : 15; })
.attr("rx", 10)
.attr("ry", 10)
.attr("width", 10)
.attr("height", 10);
nodeExit.select("text")
.style("fill-opacity", 1e-6)
.attr("text-anchor", "middle");
function calculateTextWrap(element, data) {
var text = d3.select(element);
if (text.node().getComputedTextLength() < 150) {
//console.log("No need to wrap");
} else {
var words = text.text().split("").reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(0.35),
tspan = text.text(null).append("tspan").attr("text-anchor", "start").attr("x", 5).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(""));
if (tspan.node().getComputedTextLength() > 150) {
lineNumber++;
line.pop();
tspan.text(line.join(""));
line = [word];
tspan = text.append("tspan").attr("text-anchor", "start").attr("x", 5).attr("y", y).attr("dy", lineHeight + dy + "em").text(word);
}
}
}
var rectHeight = text.node().getBBox().height;
if(rectHeight < 30) rectHeight = 30;
data.rectHeight = rectHeight + 10 ;
}
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("fill", "none")
.attr("stroke", "black")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}.node {
cursor: pointer;
border-style: solid;
border-width: 2px 10px 4px 20px;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node rect {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
答案 1 :(得分：0)
尝试将其添加到您的样式中：
.node {
height: fit-content;
width: fit-content;
padding: .5rem;
}
它使节点类的高度和大小适合元素的内容（文本）。它应该可以解决问题。
相关问题
- 使用jQuery ui滑块更改d3.js绘制的rect元素的高度
- 如何在d3.js轴上增加刻度标签宽度
- 当我使用d3.js在多级树形图中单击rect时，如何调整宽度和高度？
- 从d3.js中的json数据动态设置的气泡图宽度和高度
- 如何增加图形区域图的宽度和高度
- 如何通过在d3 js中固定矩形框的宽度来动态增加高度
- 使用d3 js动态调整文本大小的矩形节点大小（节点的宽度和高度）
- 如何使用animateTransform增加<rect>宽度？
- 如果在div的情况下如何首先按高度增加框尺寸然后按宽度增加框尺寸？
- 如何根据内容自动增加'<rect>'的高度和宽度？我想自动增加<rect>高度和宽度吗？
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？