Angrenzend svg: Polygonkanten nicht erfüllen

Question

ich ein Balkendiagramm bin zeichnen diese unter Verwendung von Polygonen nebeneinander wie:

Wenn Sie genau hinsehen, gibt es keine weißen Bereiche zwischen jedem Polygon (gezoomt) :

ich versuche, dies geschieht zu verhindern. Ich fand SVG shape-rendering Attribut heraus und stellte es auf geometricPrecision ein. Dies löste das Problem, sondern gab mir sehr scharfe Kanten:

Ich will nicht, dass entweder. Ich habe andere mögliche Werte für shape-rendering versucht, aber keiner hat gut funktioniert. (Ich habe diese auf WebKit versucht.) Ich suche nach einer Lösung.

Für diejenigen interessiert, jsFiddle der Tabelle here.

Answer 1

Wirklich das Problem ist, dass Sie den Graphen als ein einzelnes Polygon anstelle eines Polygons für jeden Balken, aber ich nehme an, es gibt einen Grund, den Sie es so tun.

Eine mögliche Lösung besteht darin, die Stricheigenschaften festzulegen, sodass die Umrisse der Polygone gezeichnet werden und sich leicht überlappen. Sie können diese Eigenschaften für das Gruppenelement festlegen, um sie auf alle eingeschlossenen Polygone anzuwenden.

<g stroke-width="0.5" stroke="black" stroke-linejoin="round"> 

Updated jsFiddle link

Beachten Sie, dass dies die Grafik aussehen lässt etwas biggger als es sein sollte, aber ich glaube nicht, dass ein großes Problem ist.

Der Grund, warum es passiert, ist, weil die Offsets Ihrer Polygone nicht genau auf Pixelgrenzen ausgerichtet sind (zumindest die meiste Zeit). Wenn Sie die SVG-Breite auf ein Vielfaches von 300 Pixel festgelegt haben (also alles an Pixelgrenzen ausrichten), sollten die Lücken verschwinden.

Betrachten wir ein 4x4 Pixel-Bereich, in dem Sie von (0,0) bis (2.5,2.5), wie dies ein Quadrat zu machen versuchen:

Sie malen können die Pixel (0 , 0) bis (1,1) in Schwarz, aber wie gehst du mit den Kanten um - sie sind weder ganz schwarz noch ganz weiß. Die Anti-Aliasing-Lösung besteht darin, einen Grauton zu verwenden, der proportional dazu ist, wie viel Pixel abgedeckt sind.

Aber dann, wenn Sie ein anderes Polygon direkt neben dem ersten Versuch und machen (das heißt bei einem Offset von 2,5 Start), werden Sie das gleiche Problem Anti-Aliasing der linken Kante haben. Nur wird es dieses Mal etwas dunkler sein, da der Hintergrund eher grau als weiß ist.

Wie Sie gefunden haben, können Sie diesen Effekt deaktivieren, indem Sie eine andere Form-Rendering Option einstellen, aber dann verlieren Sie den Vorteil des Anti-Aliasing auf schrägen Linien, so dass diese Kanten gezackt aussehen .

Answer 2

Ich fand eine endgültige und elegante Lösung für dieses Problem. Konvertieren Sie Ihre mehrere Polygone in einen Pfad mit mehreren Segmenten:

<script src="http://d3js.org/d3.v3.min.js"></script> 
<svg width="100%" height="30%" viewBox="0 0 100 100" preserveAspectRatio="none"> 
     <path d="M0,100 0,70 3.3333333333333335,66 3.3333333333333335,100 M3.3333333333333335,100 3.3333333333333335,66 6.666666666666667,66 6.666666666666667,100 M6.666666666666667,100 6.666666666666667,66 10,62 10,100 M10,100 10,62 13.333333333333334,57.99999999999999 13.333333333333334,100 M13.333333333333334,100 13.333333333333334,57.99999999999999 16.666666666666664,56 16.666666666666664,100 M16.666666666666664,100 16.666666666666664,56 20,54 20,100 M20,100 20,54 23.333333333333332,40 23.333333333333332,100 M23.333333333333332,100 23.333333333333332,40 26.666666666666668,24 26.666666666666668,100 M26.666666666666668,100 26.666666666666668,24 30,15.999999999999998 30,100 M30,100 30,15.999999999999998 33.33333333333333,13.999999999999996 33.33333333333333,100 M33.33333333333333,100 33.33333333333333,13.999999999999996 36.666666666666664,11.999999999999996 36.666666666666664,100 M36.666666666666664,100 36.666666666666664,11.999999999999996 40,10.000000000000004 40,100 M40,100 40,10.000000000000004 43.333333333333336,10.000000000000004 43.333333333333336,100 M43.333333333333336,100 43.333333333333336,10.000000000000004 46.666666666666664,8.000000000000004 46.666666666666664,100 M46.666666666666664,100 46.666666666666664,8.000000000000004 50,8.000000000000004 50,100 M50,100 50,8.000000000000004 53.333333333333336,6.000000000000002 53.333333333333336,100 M53.333333333333336,100 53.333333333333336,6.000000000000002 56.666666666666664,6.000000000000002 56.666666666666664,100 M56.666666666666664,100 56.666666666666664,6.000000000000002 60,8.000000000000004 60,100 M60,100 60,8.000000000000004 63.33333333333333,10.000000000000004 63.33333333333333,100 M63.33333333333333,100 63.33333333333333,10.000000000000004 66.66666666666666,8.000000000000004 66.66666666666666,100 M66.66666666666666,100 66.66666666666666,8.000000000000004 70,11.999999999999996 70,100 M70,100 70,11.999999999999996 73.33333333333333,13.999999999999996 73.33333333333333,100 M73.33333333333333,100 73.33333333333333,13.999999999999996 76.66666666666667,11.999999999999996 76.66666666666667,100 M76.66666666666667,100 76.66666666666667,11.999999999999996 80,10.000000000000004 80,100 M80,100 80,10.000000000000004 83.33333333333334,11.999999999999996 83.33333333333334,100 M83.33333333333334,100 83.33333333333334,11.999999999999996 86.66666666666667,13.999999999999996 86.66666666666667,100 M86.66666666666667,100 86.66666666666667,13.999999999999996 90,11.999999999999996 90,100 M90,100 90,11.999999999999996 93.33333333333333,4.000000000000002 93.33333333333333,100 M93.33333333333333,100 93.33333333333333,4.000000000000002 96.66666666666667,0 96.66666666666667,100 M96.66666666666667,100 96.66666666666667,0 100,0 100,100 M100,100 100,0 100,0 100,100"/> 
</svg> 

http://jsfiddle.net/313xc6bg/

Es wird jedoch nicht funktionieren, wenn Sie allerdings unterschiedliche Effekte auf jede Segmente anwenden möchten. In diesem Fall würde die Problemumgehung meines Erachtens darin bestehen, einen Strich hinzuzufügen, der breit genug ist, um die Leerstellen zu überdecken, während die AA aktiviert bleibt.

Auch hatte ich noch Probleme mit Safari (nur) in Bezug auf die Reihenfolge der Punkte in verschiedenen Polygonen. Das Ändern der Reihenfolge (d. H. Im Uhrzeigersinn gegen den Uhrzeigersinn) behob das Problem.