Javascript SVG外来对象文本未显示_Javascript_D3.js_Svg

Javascript SVG外来对象文本未显示

javascript d3.js svg

Javascript SVG外来对象文本未显示,javascript,d3.js,svg,Javascript,D3.js,Svg,我已经看过了- 它没有回答我的问题。我在SVG中有一个外来对象中的文本，它没有显示这是我的密码 var svg = d3.select("#chart").append("svg").attr('width', width).attr('height', height); var cell = svg.selectAll("g") .data(nodes) .enter().append("g")

我已经看过了-

它没有回答我的问题。我在SVG中有一个外来对象中的文本，它没有显示

这是我的密码

        var svg = d3.select("#chart").append("svg").attr('width', width).attr('height', height);

        var cell = svg.selectAll("g")
            .data(nodes)
            .enter().append("g")
            .attr("class", "cell");

        cell.append("rect")
            .attr("class", "node")
            .attr("x", function(d) { 
                return x(d.x); })
            .attr("y", function(d) { 
                return y2(d.y); })
            .attr("width", function(d) { 
                return x(d.dx); })
            .attr("height", function(d) { 
                return y2(d.dy); })
            .style("fill", function(d) { 
                var test = (d.children ? d : d.parent).name;
                console.log(test);
                return color(Math.random());; 
            })

        cell.append("foreignObject")
            .attr("class", "foreignObject")
            .attr("width", function(d) {
                return d.dx;
            })
            .attr("height", function(d){
                return d.dy;
            })
            .attr("transform", function(d) {
                return "translate(" + x(d.x + d.dx/2) + "," + (y2(d.y)) + ") rotate(90)";
            })
            .append("xhtml:body")
            .attr("class","label")
            .append("div")
            .text(function(d){
                return d.name;
            })
            .attr("text-anchor", "middle");

正如另一个答案所说，我在body标签中有文本，但我仍然看不到文本。看起来container div没有高度，尽管我显式地设置了高度

发生什么事了

这奏效了

使用CSS在foreignObject上设置宽度和高度

.foreignObject {
    font: 9px sans-serif;
    text-overflow: ellipsis;
    text-align: left;
    word-wrap: break-word;
    height: 100px;
    width: 100px;
}

在使用标记之前，您需要包含标记

像这样的东西

<switch>
<foreingObject>
<body>
some code here
</body>
</foreingObject>
</switch>

这应该可以很好地与铬