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);

どの色が重なり合っているかによって、長方形の間に非常に薄い空白が存在するか、2 つの色の一種の「重なり」があることに気付きました。

このフィドルで私が何を意味するかを見ることができます: http://jsfiddle.net/ysim/PrC7X/

あなたはそれを見ることができ、問題は.green-greenあり.green-greyません（とにかく肉眼では）。しかし、.green-blueと.red-blueにはオーバーラップがあり.green-red、 には余分な空白があります。

要素に (ここで.attr("stroke-rendering", "crispEdges")推奨) とを追加しようとしましたが、両方の要素を内の要素にラップして(ここで推奨)追加しようとしましたが、どちらのソリューションも機能しません。.attr("stroke", "none")rectrectgsvg.attr("stroke-rendering", "crispEdges")

この余分な空白/オーバーラップの原因は何ですか?最初の2つのケースのように、色がきれいに整列するように修正するにはどうすればよいですか?

4

2 に答える 2