为什么d3组中两个坐标相同的元素不是100％重叠？

问题描述：

好吧，我有种奇怪的问题。 d3组中具有相同坐标的两个元素不完全重叠。在Chrome浏览器（1. pic）下，两个坐标x & y都关闭，并且在Safari（2. pic）下关闭。在图片上，您只能看到文本和textarea的边框！有谁知道为什么以及如何解决它（没有手动调整坐标）？
首先，我将一个svg添加到HTML-body，然后将一个组添加到svg，然后将一个矩形添加到该组，然后添加一个textarea。这里是一些代码部分：为什么d3组中两个坐标相同的元素不是100％重叠？

var svg = d3.select("body").append('svg') 
.attr('preserveAspectRatio', 'xMinYMin meet') 
.attr('viewBox', '0 0 960 600') 
.attr('width', '100%') 
.attr('height', '100%') 

grp = svg.append("g") 
    .datum({x: 0, y: 0}) 

rect = grp.append("rect") 
    .data([{x: data.x, y: data.y, width: data.w, height: data.h}]) 
    .attr("x", function (d) {return d.x;}) 
    .attr('y', function (d) {return d.y;}) 
    .attr('width', function (d) {return d.width;}) 
    .attr('height', function (d) {return d.height;}) 

textarea = grp.append("foreignObject") 
    .data([{x: data.x, y: data.y, width: data.w, height: data.h}]) 
    .attr("x", function (d) {return d.x;}) 
    .attr('y', function (d) {return d.y;}) 
    .attr('width', function (d) {return d.width;}) 
    .attr('height', function (d) {return d.height;}) 
    .append("xhtml:body") 
    .attr('xmlns','http://www.w3.org/1999/xhtml') 
    .append('textarea') 
    .style("width", (data.w) + "px") 
    .style("height", (data.h)+ "px")

铬

Safari浏览器

答

因为你<foreignObject>内<body>和<textArea>元素具有默认的CSS利润率。

var data = {x:20, y:50, w: 500, h:300} 
 
var svg = d3.select("body").append('svg') 
 
.attr('preserveAspectRatio', 'xMinYMin meet') 
 
.attr('viewBox', '0 0 960 600') 
 
.attr('width', '100%') 
 
.attr('height', '100%') 
 

 
grp = svg.append("g") 
 
    .datum({x: 0, y: 0}) 
 

 
rect = grp.append("rect") 
 
    .data([{x: data.x, y: data.y, width: data.w, height: data.h}]) 
 
    .attr("x", function (d) {return d.x;}) 
 
    .attr('y', function (d) {return d.y;}) 
 
    .attr('width', function (d) {return d.width;}) 
 
    .attr('height', function (d) {return d.height;}) 
 
    .attr('fill', '#FF00FF'); // should be visible 
 

 
textarea = grp.append("foreignObject") 
 
    .data([{x: data.x, y: data.y, width: data.w, height: data.h}]) 
 
    .attr("x", function (d) {return d.x;}) 
 
    .attr('y', function (d) {return d.y;}) 
 
    .attr('width', function (d) {return d.width;}) 
 
    .attr('height', function (d) {return d.height;}) 
 
    .append("xhtml:body") 
 
    .attr('xmlns','http://www.w3.org/1999/xhtml') 
 
    .append('textarea') 
 
    .style("width", (data.w) + "px") 
 
    .style("height", (data.h)+ "px")

foreignObject > body, 
 
foreignObject textArea{ 
 
    margin: 0; 
 
    padding:0; 
 
    border:0px; 
 
    } 
 
foreignObject body{ 
 
    background: transparent; 
 
    } 
 
foreignObject textArea{ 
 
    background: linear-gradient(45deg, rgba(0,0,0,.5), rgba(255,255,255,.5)); 
 
    } 
 
body{ 
 
    background: lightsalmon; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>

谢谢Kaiido。边缘......当然。我希望添加“* {margin：0px; padding：0px;}”应该适用于所有元素。 – Oli

为什么d3组中两个坐标相同的元素不是100％重叠？

相关推荐