1

我正在使用 d3.js 以这种方式生成一些直接在彼此之上的矩形：

var greenRed = d3.select(".green-red").append("svg")
    .attr("height", 120);
greenRed.append("rect")
    .attr("fill", "green")
    .attr("x", 0)
    .attr("y", 0)
    .attr("height", 50)
    .attr("width", 300);
greenRed.append("rect")
    .attr("fill", "red")
    .attr("x", 0)
    .attr("y", 50)
    .attr("height", 50)
    .attr("width", 300);

我注意到，根据堆叠在一起的颜色，矩形之间要么存在非常薄的空白，要么是两种颜色的某种“重叠”。

你可以在这个小提琴中看到我的意思：http: //jsfiddle.net/ysim/PrC7X/

您可以看到，.green-green并且.green-grey没有问题（无论如何，肉眼）；但是对于.green-blue和.red-blue，有一个重叠，对于.green-red，有一个额外的空格。

我已经尝试添加.attr("stroke-rendering", "crispEdges")（此处建议）和.attr("stroke", "none")元素rect，以及将两个rect元素包装在一个g元素中svg并添加.attr("stroke-rendering", "crispEdges")到该元素中（此处建议），但这些解决方案都不起作用。

是什么导致了这个额外的空白/重叠，我该如何修复它以使颜色整齐对齐，就像前两种情况一样？

4

2 回答 2

2

尝试将 stroke-width 属性设置为 0

于 2013-07-04T02:23:36.297 回答
0

That's antialiasing. Add style="shape-rendering: crispEdges" to the <div> elements and it will go away. You could add it to the shapes themselves instead if you want either as an attribute or a style.

The other thing to do is to add 0.5 to the y co-ordinates of your shapes There's more information about why that works here

于 2013-07-04T07:01:47.020 回答