0
我正在使用d3.js可視化來描繪節點。截至目前，我正在收到文本。我有一個代碼來調整rect的寬度，取決於進入它的文本的長度。但是，有時它不起作用，文本將從rect框中刪除。這是代碼。如何在我的svg的矩形框中將文本放入d3.js中？
nodeEnter.append("rect").attr("x",
function(d) {
var x = d.name.length;
x = x + 150;
return -(x)/2;
}).attr("y", -10).attr(
"width",
function(d) {
var x = d.name.length;
x = x + 150;
return x;
}).attr("height", 20).style({
"fill": function(d) {
return d._children ? "lightsteelblue" : "#fff";
},
"stroke": "steelblue",
"stroke-width": "1.5px"
});
nodeEnter.append("text").attr("x", 0).attr("y", 0)
.attr("dy", ".35em").attr(
"text",
function(d) {
return d.children || d._children ? "end" : "start";
}).text(function(d) {
return d.name;
}).style({
"fill-opacity": 1e-6,
"font-size": "10px",
"font-family": "sans-serif"
}).attr(
"text-anchor", "start");這裏我把文本的長度去入禁區，並添加150.但是，工作不超過一個點。我可以在這裏得到任何幫助嗎？
根據使用getBBox（）的建議。我嘗試使用它，這裏是編輯的代碼
var text = nodeEnter.append("svg:text").attr("x", 0).attr("y", 0)
.attr("dy", ".35em").attr(
"text",
function(d) {
return d.children || d._children ? "end" : "start";
}).text(function(d) {
return d.name;
}).style({
"fill-opacity": 1e-6,
"font-size": "10px",
"font-family": "sans-serif"
}).attr(
"text-anchor", "middle");
var bbox = text.node().getBBox();
nodeEnter.append("rect").attr("x",
function(d) {
var x = d.name.length;
x = x + 150;
return -(x)/2;
}).attr("y", -10).attr(
"width", bbox.width).attr("height", bbox.height)
.style({
"fill": function(d) {
return d._children ? "lightsteelblue" : "#fff";
},
"stroke": "steelblue",
"stroke-width": "1.5px"
});本公司製造的矩形框內的文字消失，只有溢出的文本可見
請參閱https://stackoverflow.com/questions/20115090/d3-js-auto-font-sizing-based-on-nodes-individual-radius-diameter - 此工作方式與其他方式類似，您可以在其中調整矩形，而不是文字。 –