D3.js 溢出：在d3 force布局中，在foreignObject中滚动不起作用

我正在使用d3js进行我的工作。在我的例子中，问题是foreignobject中的滚动条不起作用。我已经搜索过了，但是没有成功的解决方案。一件事是，滚动条在foreignobject进入强制布局之前工作良好。我不明白为什么？这是我的密码和密码 非常感谢所有的支持

<div id="main" style="width:800; height:800">
</div>
<script>
var nodes=[
  {"name": "david"},
  {"name": "beckham"}
];
var links=[
    {"s":"david", "t":"beckham"}
    ];
var graph={};

graph['nodes']=nodes;
graph['links']=links;

graph.links.forEach(function(link){
    graph.nodes.forEach(function(node){
            if(link.s === node.name)
                link.source = node;
            else link.target = node; 


        }); 
    }); 

var svg = d3.select("#main").append('svg:svg')

    .attr("id","main_svg")
    .attr("width", 800)
    .attr("height", 800);

var force = d3.layout.force()
    .charge(-300)
    .linkDistance(100)
    .size([800, 800])
    .nodes(d3.values(graph.nodes))
    .on("tick", tick)
    .links(graph.links)
    .start();

var group = svg.append("g");

var path=group.selectAll("path").data(force.links());
path.enter().append("path")
        .attr("class", "link")
        .attr("fill", "blue")
        .attr("id",function(d,i) { return "linkId_" + i; })
        .style("stroke-width",1);

var node = group.selectAll("rect").data(force.nodes());
node.enter().append("rect")
                .attr("class","node")
                .attr("width",10)
                .attr("height",10)
                .style("fill","red");

var forobj = group.selectAll("foreignObject").data(force.nodes());              
forobj.enter().append("foreignObject")
                        .attr("class","forobj")
                        .attr("id",function(d){return d.name;})
                        .attr("width",400)
                        .attr("height",150)
                        .append("xhtml:body")
                        .style("display", function(d){
                                return (d.name === "david") ? "inline-block":"none";
                            })
                        .append("div")
                        .attr("class",function(d){return "class" + d.name;})
                        .attr("id",function(d){return "div" + d.name;})
                        .style("width",300)
                        .style("height",100)
                        .style("overflow","scroll")
                        .html("<table style=\"width:400; height:200; background-color:#0FC\"><tr><td>table contents</td><td>table contents</td><td>table contents</td><td>table contents</td><td>table contents</td><td>table contents</td></tr></table>");



function tick(e) {
    path.attr("d", function(d) {
            var dx = d.target.x - d.source.x,
                dy = d.target.y - d.source.y,
                dr = Math.sqrt(dx * dx + dy * dy);
            return "M" + 
                d.source.x + "," + 
                d.source.y + "A" + 
                dr + "," + dr + " 0 0,1 " + 
                d.target.x + "," + 
                d.target.y;
        });
    forobj.attr("transform", function(d,i) {return "translate(" + (d.x + 20) + "," + (d.y + 20) + ")"; });
    node.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")"; });
}
</script>

变量节点=[
{“姓名”：“大卫”}，
{“姓名”：“贝克汉姆”}
];
变量链接=[
{“s”：“大卫”，“t”：“贝克汉姆”}
];
var图={}；
图['nodes']=节点；
图['links']=链接；
graph.links.forEach（函数（link）{
graph.nodes.forEach（函数（节点）{
if（link.s==node.name）
link.source=节点；
else link.target=节点；
}); 
}); 
var svg=d3.select（“#main”）.append（'svg:svg'））
.attr（“id”，“main_svg”）
.attr（“宽度”，800）
.attr（“高度”，800）；
var-force=d3.layout.force（）
。收费（-300）
.linkDistance（100）
.尺寸（[800800]）
.节点（d3.值（图形节点））
.on（“滴答”，滴答）
.links（graph.links）
.start（）；
var group=svg.append（“g”）；
var path=group.selectAll（“path”）.data（force.links（））；
path.enter（）.append（“路径”）
.attr（“类”、“链接”）
.attr（“填充”、“蓝色”）
.attr（“id”，函数（d，i）{return“linkId\+i；}）
.样式（“笔划宽度”，1）；
var node=group.selectAll（“rect”）.data（force.nodes（））；
node.enter（）.append（“rect”）
.attr（“类”、“节点”）
.attr（“宽度”，10）
.attr（“高度”，10）
.样式（“填充”、“红色”）；
var forobj=group.selectAll（“foreignObject”）.data（force.nodes（））；
forobj.enter（）.append（“foreignObject”）
.attr（“类”、“forobj”）
.attr（“id”，函数（d）{返回d.name；}）
.attr（“宽度”，400）
.attr（“高度”，150）
.append（“xhtml:body”）
.样式（“显示”，功能（d）{
返回（d.name==“david”）？“内联块”：“无”；
})
.附加（“div”）
.attr（“类”，函数（d）{return“class”+d.name；}）
.attr（“id”，函数（d）{return“div”+d.name；}）
.样式（“宽度”，300）
.样式（“高度”，100）
.style（“溢出”、“滚动”）
.html（“表格内容稳定内容稳定内容稳定内容”）；
功能勾号（e）{
attr（“d”，函数（d）{
变量dx=d.target.x-d.source.x，
dy=d.target.y-d.source.y，
dr=Math.sqrt（dx*dx+dy*dy）；
返回“M”+
d、 source.x+“，”+
d、 source.y+“A”+
dr+“，“+dr+”0,1”+
d、 target.x+“，”+
d、 目标.y；
});
forobj.attr（“transform”，函数（d，i）{return”translate（“+（d.x+20）+”，“+（d.y+20）+”）；}；
attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
}

应该会有帮助。我见过滚动条在Firefox中运行良好，但在Chrome中不起作用。当使用静态位置元素时，线程仍然对我有用。我不明白为什么滚动条在Chrome中不起作用。谢谢你，拉尔斯！