我有一个D3 Force Layout,它在FireFox和Chrome上运行良好,但是我附加到SVG节点的标签中的外来对象都没有出现在Safari浏览器中。代码如下。出了什么问题?当我在FireFox/Chrome检查器中查看外来对象时,它显示了我附加到外来对象的html。但是当我在Safari检查器中查看时,html根本不在那里。
**编辑:**这里有一个simplified jsfiddle的问题。如果你在Chrome或Firefox中打开它,它可以正常工作。如果你在Safari中打开它,它就不行了。
nodeTxt = svg.selectAll(".nodetxt")
.data(nodeTxtData)
.enter()
.append("foreignObject")
.attr("class", "nodeTxt")
.attr({
"width": function(d) { return d.radius; },
"height": function(d) { return d.radius; }
})
.style({
"font-size": function(d) { return d.radius/4 + "px";},
"border-radius": function(d) { return d.count * 2;},
"-webkit-border-radius": function(d) { return d.count * 2;},
"-moz-border-radius": function(d) { return d.count * 2;},
"position": "relative",
"pointer-events": "none"
})
.html(function(d) {
var uID = d.name.replace(/([.*+?^=!;:$%&'," "{}()|\-[\]\/\\])/g, "").substring(0,25);
if (uID !== null) {
return '<div class="htmlDiv" id=' + uID + ' style="width:' + d.count * 4 + 'px; height:' + d.count * 4 + 'px;' +
'border-radius:' + d.count * 2 + 'px;' + '-webkit-border-radius:' + d.count * 2 + 'px;' +
'-moz-border-radius:' + d.count * 2 + 'px;">' + d.name + '</div>';
} else {
console.log(d);
return '<div id="bad"></div>';
}
})
.attr({
"transform": function(d) {
var uID = d.name.replace(/([.*+?^=!;:$%&'," "{}()|\-[\]\/\\])/g, "").substring(0,25);
if(uID !== null){
var w1 = (parseInt(d3.select(this).style("width"), 10) / 2),
w2 = d.count * 2,
y = -d.count * 2,
x = (w1 > w2) ? -w1 : -w2;
return "translate(" + x + "," + y + ")";
} else {
return "translate(0,0)";
}
},
"opacity": 1
});
1条答案
按热度按时间yx2lnoni1#
有点老了,但我希望这能有所帮助:
将
position: fixed
添加到foreignObject
内的元素中可以解决定位问题,但不能解决比例问题。同样,
foreignObject
内部的元素应该具有:transform-origin: 0px 0px