Hallo,
ich habe eine SVG Grafik, bei der eine unbekannte Anzahl -Elemente von einem großen -Element verdeckt werden. Wie kann ich die vollständig verdeckten -Elemente bestimmen um mit diesen weiter zu arbeiten?
Als Framework verwende ich d3.js in der Version 4.
ds3 arbeitet mit Selektoren, wie man sie von anderen JS-Frameworks oder ähnlich auch in CSS kennt. Dabei kann nach Attributen, Elementnamen oder Position im DOM selektiert werden, nach sowas wie “verdeckt andere” zunächst nicht. Das müsste aus der Struktur abgeleitet werden. Kannst Du das SVG-Snippet posten, dann könnte man einen passenden Selektor bauen. Ist das SVG in HTML eingebunden?
Hallo,
ich habe folgendes Resultat.
Damit ersichtlich ist, was ich vorhabe, habe ich die “weißen” Bereichte der Karte halbtransparent blau eingefärbt. Alle Elemente welche zu 100% hinter dem blauen Bereicht verdeckt sind, sollen zb. gelöscht werden. Die Anzahl der zu löschenden Elemente kann sich je nach Skalierung der Karte verändern, da die Hexagone ihre größe nicht verändern. Die Anzahl der Hexagone ändert sich mit jeder Skalierung.
Die Karte ergibt sich aus folgendem Path und wird je verfügbarem Platz transformiert.
"M 0,0.00643919 0,186.00058 l 224.01254,0.0221 -0.0106,-186.02014706 z m 71.613281,2.78125001 2.039063,0.9609375 2.039062,0 0.121094,0 0.119141,0 3.361328,1.1992188 0.11914,0.1210937 0.240235,0.2382813 2.40039,2.1601562 1.677735,-0.8398438 0.480469,0.2402344 1.080078,1.5605469 0.11914,0.1191406 0,0.1191407 -0.11914,0.1210937 -0.119141,0.359375 0,0.1191406 0,0.1210938 -0.361328,0.359375 -0.480469,0 -0.83789,0 -0.839844,0 -0.361328,-0.1191407 -0.119141,-0.3613281 -0.119141,-0.71875 -0.242187,0.1191407 -0.238281,0.5996093 -0.59961,2.2812502 1.199219,2.400391 3.119141,3.478515 -0.240235,1.800782 1.080078,2.40039 0.960938,0.839844 1.199219,1.320313 -0.119141,3.478515 0.599609,2.761719 0,0.597656 2.400391,-0.238281 -1.080078,1.199219 -0.240235,0.240234 0.478516,0.121094 0.480469,0 0.478515,0 0.722657,-0.121094 0.238281,0 0.960938,-0.480469 1.078124,-0.599609 0.361329,-0.359375 0.240234,0 0.478516,-0.121094 0.720703,0.240235 3.599609,1.441406 0.839847,0.478515 -0.11914,0.71875 2.03906,0.601563 3.95898,-0.480469 0.48047,-0.240234 1.67969,0.240234 1.32031,0.480469 0.48047,0.121094 1.67969,0 0.83984,-0.242188 1.5586,-0.599609 1.32031,-0.480469 0.59961,1.201172 0.12109,1.318359 1.32031,0.601563 1.19922,0.240234 0.23828,-0.11914 0.8418,-0.121094 1.67969,1.320312 0.47851,3.119141 0.96094,0.958984 1.19922,0 -0.71875,0.720703 0,0.359375 0.35938,0.841797 0.7207,0.71875 1.32031,0.960938 2.03906,1.679687 0,0.359375 -0.59961,0.960938 -3.7207,5.517578 -1.32031,1.201172 -0.35938,0 -0.23828,0 -0.7207,-1.201172 -0.24024,0.121094 0,0.121093 -0.59961,0.71875 -0.60156,1.080079 -0.23828,1.080078 1.91992,1.441406 1.5586,0.238281 1.56054,-0.599609 0.11914,0 0.1211,0 1.08008,0.480468 3.35742,4.919922 0,0.359375 -0.83789,1.800782 -0.24024,0.478515 -1.08007,1.320313 0.48046,3.121093 1.08008,0.71875 0.59766,0.240235 0,0.359375 4.80078,-0.119141 0.48047,-1.199219 1.19922,-0.720703 0.48047,0 2.40039,0.59961 3.23828,0.359375 1.80078,-0.238282 2.03906,1.439454 0.36133,0.839843 0.11914,0.720703 0.24023,1.080079 1.08008,0.958984 3.11914,1.679687 1.5586,0.59961 2.64062,0.720703 2.04102,-0.720703 3.71875,-0.839844 0.35937,0.121094 0.1211,0.11914 1.55859,0.960938 5.51953,3.597656 0.48047,0.361328 3,3.839844 0.24023,0.958984 0,1.201172 1.19922,-0.599609 0.35938,-0.121094 4.32031,-0.599609 0.95898,0.240234 1.80079,0.839844 1.43945,0.599609 1.56055,0.480469 -0.1211,-1.080078 0.48047,-0.480469 0.24024,-0.240234 0.7207,-0.480469 0.11914,0 1.32031,2.521484 1.31836,2.279297 0.59961,-0.599609 0.36133,-0.121094 0.95898,-1.318359 0.1211,-0.121094 0.11914,-0.240234 0,-0.119141 0,-0.240234 -0.11914,-0.119141 -0.59961,-0.121094 0.35937,-1.560547 0.11914,-0.359374 1.44141,-1.320313 0.23828,-0.359375 0.36133,-0.478516 1.79883,-3 0.12109,-0.361328 0.11914,-1.439453 -0.59961,-1.080078 -0.35937,0 -1.20117,0.238281 -1.32032,0.121094 0,-0.839844 0.60156,-2.878906 1.91993,-2.28125 0,-1.080078 1.91992,-0.238281 2.05664,-2.814453 0.12109,0 0.71875,0.240234 0.82227,2.333984 0,0.71875 0.11914,0.839844 0.48047,0.361328 1.08008,0.359375 3,0.119141 0.59961,-0.359375 3.13867,-2.453125 0.24023,0.240234 -0.0195,3.533203 0.7207,0.359375 2.39844,1.560547 0.24024,2.279297 0.36132,2.041016 0.35938,0.11914 0.35937,-0.11914 -0.11914,-1.201172 0.35938,-0.119141 0.83984,0.240235 0.7207,0.11914 0.24024,2.279297 0.71875,0.960937 1.91992,1.080079 0.48047,0.121093 1.08008,-0.361328 0.95898,-0.839844 0.24024,0.240235 0.7207,1.439453 0.11914,0.359375 0.48047,2.28125 0.24023,1.318359 0.48047,1.560547 0.47852,0.960938 0.24023,0.359375 0.48047,0.359375 0.35938,0.240234 0.12109,0 0.11914,0.480469 -1.08008,2.039062 -5.1582,0.480469 -0.7207,-0.119141 -0.35938,-0.361328 -0.48047,-0.11914 -2.27929,0.599609 -3.24024,1.080078 -0.11914,0.121094 -1.91992,1.679687 -1.08008,2.400391 0.35938,0.958985 -0.59961,0.96094 -1.67969,0.95898 -0.83984,-0.95898 -0.59961,-0.24024 -1.20118,-0.12109 -0.71875,0.12109 -0.36132,0.11914 -1.91993,1.31836 -0.11914,0.24219 0,1.67773 -5.40039,1.92188 -1.55859,-0.24024 -0.7207,-0.83984 0,0.48047 -0.48047,0.71875 0.83984,1.20117 -0.11914,1.31836 0.24023,0 0.72071,0.12109 0.59961,0 1.19922,-0.24023 0.24023,0.71875 -0.35938,1.20117 -1.56054,1.67969 -0.48047,0 -1.19922,-0.48047 -0.12109,-0.35938 -0.83985,1.19922 -0.47851,1.91993 0.83984,1.08007 0.47852,0 0.36132,0 1.43946,-0.47851 0.83984,0.95898 -0.24023,0.48047 -0.59961,0.83984 -0.7207,0.59961 0.7207,2.51954 1.08008,1.08007 0.35937,0 0.12109,0.1211 2.03907,0.11914 0.7207,-0.35938 0.59766,0.59961 -0.23828,0.48047 -0.24024,1.79883 -1.55859,1.68164 -2.52149,2.63867 -2.40039,0.36133 -3.71875,1.91992 -0.83984,0.11914 -0.36133,-1.32031 -0.71875,-0.96094 -0.71875,0 -0.48047,0.24219 -2.51953,4.19726 -0.12109,0.1211 -0.24024,0.83984 1.08008,0.35938 1.32031,0.36133 0.35938,-0.36133 0.96094,0 0.11914,0.12109 0.12109,0.59961 0,0.11914 0,0.48047 -0.24023,0.12109 -0.24024,0.11914 -1.56055,0 -1.31835,0.83985 -1.19922,-1.32031 -1.44141,0 -0.59961,0.12109 0,1.08008 -0.12109,1.67969 -2.2793,0.24023 -1.08008,0.11914 -1.43945,-1.79883 0.7207,-0.8418 0.24024,-0.5996 0.59961,-1.91993 -0.48047,-0.71875 -1.67969,-2.28125 0.59961,-0.71875 0.24023,-0.36132 -0.95898,-1.19922 -0.7207,0.35937 -1.67969,1.43945 0.35937,0.8418 0.35938,0.47852 -0.59766,0.59961 -1.32031,0.96093 -1.56055,0.96094 -1.56054,0.71875 0.48046,1.43945 0.24024,0.72071 -0.59961,0.83984 -1.32031,1.08008 -1.67969,0.35937 -0.24024,0 -0.12109,0.1211 -0.71875,0.83984 -0.11914,0.59961 1.19922,2.88086 1.08008,0 0.83984,-0.12109 0.71875,-0.11914 1.08008,0.11914 2.04101,2.88086 0.59961,0.95898 0,0.1211 0.11915,0.11914 -1.80079,3.11914 -0.47851,0 -2.51953,0.7207 -0.96094,0.71875 -0.23828,0.72266 0.71875,0.95898 1.20117,0.12109 1.08008,0.23828 0,0.48047 -0.36133,0.47852 -0.35938,0 -0.35937,0.12109 -2.40039,0.95899 -0.12109,0.12109 -0.11915,0.24024 -0.24023,0.47851 -0.83984,1.20117 -3.48047,1.43946 -0.11914,0 -0.11914,-0.11914 -0.1211,-0.1211 0,-0.11914 -0.35937,-0.96094 -0.95899,-1.55859 0,-0.12109 -0.60156,-0.48047 -0.11914,-0.11914 -1.19922,0.11914 -0.12109,0 -2.16016,0.48047 -0.83984,0.7207 -3.23828,1.32031 -6,1.5586 -0.1211,0 -0.11914,0 -0.24023,0 -0.11914,-0.11915 -1.19922,-1.32031 -0.36133,-0.35937 -0.11914,0 -0.12109,0 -0.1211,-0.1211 -0.11718,0 -1.56055,0.36133 -0.24024,0 -0.11914,0.35938 -0.12109,0.35937 0,0.48047 -0.11914,0.48047 -0.60156,0.48047 -2.2793,0.35937 -0.7207,0 -1.91797,-2.40039 -1.08008,-3.83984 -0.35938,-0.23828 -2.28125,0.11914 -2.16015,-1.20117 -0.35938,-0.23828 -0.11914,-0.36133 0,-0.35938 0,-0.12109 -0.12109,-2.75781 0,-2.88086 0.12109,-0.11914 0.95899,0.35937 0.12109,0 0.23828,0 0.24024,-0.59961 0,-0.24023 0,-0.1211 0,-0.11914 -0.59961,-0.96094 -0.24024,-0.35937 -0.11914,-0.24023 -0.12109,-0.11914 -0.11914,0 -0.1211,-0.1211 -3.83789,-0.71875 -0.60156,-0.12109 -1.79883,0.36133 -0.11914,0 -0.96094,1.31835 -0.59961,1.44141 -0.12109,0.83985 -0.11914,0.11914 -1.56055,0.5996 -1.08007,0.1211 -1.08008,0.35937 -0.83985,0.24024 -0.35937,-0.11914 -0.23828,0 -0.48047,0.11914 -0.24219,0.24023 -0.23828,0.83985 0,0.11914 0.11914,0.24023 0.36133,0.35938 0,0.36132 1.07812,2.63868 0.24024,0.96093 0.12109,0 0,0.1211 0,0.35742 -0.24023,1.91992 0.48047,2.76172 0.59961,1.79883 0.47851,2.28125 0,0.35937 -0.35937,0.24024 -1.19922,0.35937 -0.48047,3.96094 0,0.11914 0.24023,2.64063 0.11914,3.24023 -0.59765,0.71875 -0.48047,0.24023 -1.80078,-1.19921 -0.83985,-0.83985 -1.43945,-1.08008 -0.12109,0 -0.35938,1.5586 -0.24023,1.20117 -0.11914,0.11914 -0.72071,0 -2.51953,-1.91992 -0.35937,-0.59961 -0.72071,-1.32031 -0.11914,-0.59961 0,-0.83985 0.47852,-0.59961 1.08008,-0.83984 0.48047,-0.12109 0.11914,-0.11914 0,-0.59961 -0.11914,-0.24024 -1.67969,-2.28125 -1.79883,-2.16015 -0.24023,-0.11915 -0.960941,0.11915 -0.958985,0.24023 -0.480468,1.08008 -3.119141,1.56054 -0.480469,-0.12109 -0.359375,-0.71875 0.839844,-0.12109 0,-0.11914 -0.601563,-0.96094 -2.277343,-0.47852 -1.201172,-0.12109 0.121094,1.44141 -0.960938,0.35937 -2.039062,-2.16016 0,-0.83984 -0.601563,-0.96094 -0.359375,-0.47851 -0.71875,-0.72071 -0.361328,0 -1.917969,0.72071 -0.720703,0.23828 -3.119141,-0.23828 -6,0.23828 -0.480468,0.60156 -0.480469,1.08008 -1.320313,1.43945 -0.238281,0.24024 -0.242187,0.11914 -0.117188,0 -0.240234,-0.11914 -0.601563,-0.48047 -2.039062,-0.11914 -0.119141,1.19922 0.238282,4.19922 4.320312,3.36132 3,1.79883 2.400391,0.83985 0.11914,-0.1211 0.240235,0 0.480468,0.1211 0.359375,0.83984 0,1.68164 -0.240234,0.95898 -0.240234,0.24024 -0.71875,0.47851 -0.601563,0.24219 -4.798828,-0.48047 -1.919922,-0.24023 0.240234,-0.59961 -1.320312,-0.36133 -0.359375,0.24024 -0.121094,0.24023 0,2.16016 0.240235,0 0.240234,2.04101 -0.119141,0.11914 0,0.11914 -0.480468,0.83985 -0.119141,0.12109 -0.480469,0 -1.679687,-0.96094 -0.720703,-0.83984 -0.958985,-0.59961 -1.080078,-0.48047 -2.160156,0.59961 -1.919922,-0.11914 -0.119141,-0.48047 -0.720703,-1.91992 -0.839844,-3.59961 0.119141,-0.83984 0.601563,-3 0.11914,-3.95899 -2.40039,-0.48047 -0.480469,-0.12109 -0.958985,-2.03906 -2.519531,0 -0.599609,0.48047 -0.240234,0 -1.199219,-0.83985 -1.919922,-2.04101 -1.080078,-1.79883 -0.720703,-1.80078 -0.359375,-0.11914 -0.240235,0 -0.480468,0.11914 -0.119141,0.24023 0.119141,0.59961 -1.199219,0.35938 -2.279297,-0.24024 -0.480469,-0.71875 -0.359375,-0.48047 0,-0.59961 0.71875,-2.51953 -2.519531,-2.52148 -1.080078,-1.5586 -0.59961,-2.75976 -0.839843,-1.43945 -0.359375,0 -1.201172,0 -0.238281,0.11914 -5.160157,-2.51954 -0.960937,-2.16015 -2.158203,-3.11914 -0.601563,0 -0.240234,0 -3.478516,0.35937 -0.240234,0.24024 -0.119141,0.83984 -0.240234,0.11914 -1.080078,-0.83984 -0.240235,-0.47852 -0.11914,-0.8418 0,-0.23828 -0.361328,-0.36132 -1.080079,0.12109 -0.599609,0.59961 0,0.59961 -0.480469,0.59961 -2.039062,2.28125 -0.238281,0.24023 -1.201172,1.19922 -0.480469,0.24024 -0.238281,0.11914 -0.240235,-1.5586 0.839844,-2.16015 0.71875,-1.08008 -0.599609,-5.40039 -0.119141,-0.48047 -0.480469,-0.24024 -0.359375,-1.08007 1.080078,-1.43946 0.478516,-0.35937 0.839844,0.12109 0.11914,0.59766 0.601563,0.12109 0.480469,0 0,-1.56055 -0.361329,-0.5996 -0.11914,-0.11915 -0.839844,-2.51953 -1.199219,-1.91992 -0.121093,-0.12109 -1.439454,-0.24024 -0.11914,0 -2.400391,-0.11914 -0.839843,0.11914 -2.2812505,0.71875 -0.5996094,0.36133 -0.1191406,0 -0.1210937,0.11914 -0.1191407,0.24219 -0.1210937,0.23828 0.2402344,0.7207 1.4394531,1.79883 -0.71875,1.56055 -1.0800781,0.24023 -5.3984376,-0.96093 -0.1210937,-1.19922 0.1210937,-3.1211 1.3183594,-1.91797 1.6816406,-2.04101 1.4394532,-3 0.71875,-1.79883 -0.2382813,-2.28125 -1.0800781,-1.31836 1.6777344,-0.48047 0.2402344,-0.24023 0.2402343,-0.11914 0.2402344,-1.44141 -0.8398437,-1.19922 0,-0.7207 0.4804687,-2.1582 0.1191406,-0.36133 1.5605469,-1.31836 0.359375,-0.24024 0.960938,0.59766 0.71875,0.24219 2.160156,-0.72071 1.080078,-1.67968 0.121094,-0.8418 -0.240235,-0.11719 -0.720703,0.23828 -0.240234,0.36133 -0.119141,0 -0.240234,-1.20117 0.359375,-1.08008 1.320312,-0.95898 1.439453,-1.080078 0,-0.960938 -3.478515,-3.839843 -2.041016,-1.798828 -1.6796874,0.359375 -0.7207031,1.080078 -0.71875,-0.480469 0.4804687,-1.199219 0.359375,-0.480468 0.9589844,-0.480469 1.0800784,0.480469 1.201172,0.480468 0.958984,0.240235 2.880859,-0.480469 0.357422,-0.121094 0.722657,-0.599609 0.11914,0 0,-0.119141 -0.240234,-0.359375 -1.560547,-2.521484 -1.318359,-2.039063 -0.240235,-1.199218 0.839844,-1.919922 0.119141,-0.121094 0.240234,-0.240234 0.240234,0 1.320313,-0.119141 1.558593,0.238281 2.640626,0.601563 1.558593,0.478515 0,0.121094 0,0.119141 0,0.121093 0.361328,0.359375 0,0.121094 0.119141,0 0.720703,0.359375 0.119141,0 0.121094,0 0.11914,0 2.519531,-0.599609 0.240235,-0.121094 1.919922,-1.199219 0.720703,-2.28125 -0.601563,-0.958984 -0.839844,-1.080078 -0.83789,-0.59961 -1.320313,-0.361328 -1.679687,-0.597656 -0.480469,-0.480469 0.359375,-3.240234 0,-0.359375 0.839844,-0.960938 0.240234,-0.359375 0.958985,-0.960937 -0.958985,-1.679688 -1.080078,-0.71875 -1.919922,-1.560546 -0.11914,-0.240235 0.71875,-0.839844 3.121093,-0.839843 1.078125,1.439453 0.242188,1.080078 -0.601563,0.480469 0.958985,1.560546 0.240234,0.119141 0.480469,0.359375 0.839844,-0.71875 0.121093,-2.880859 -0.240234,-0.240235 -0.359375,-0.478515 -0.121094,-0.240235 0,-0.361328 0.480469,-1.558594 1.679688,-1.201171 0.359374,-0.958985 -0.359374,-0.720703 -1.439454,-0.359375 -2.40039,-2.160156 -0.478516,-0.361328 -0.841797,-0.238282 -4.199219,-1.080078 -2.759765,-0.601562 -0.359375,0 -0.240234,-0.357422 -0.71875,-5.28125 0.11914,-0.839844 -0.480469,-0.480468 -0.958984,0 -4.560547,-0.478516 -0.9589842,-0.240234 -3.2402344,-6.960938 -0.4804688,-1.679688 0,-2.160156 0.359375,-0.599609 1.0800782,-0.359375 3.5996092,-2.521484 1.080078,-0.71875 2.521485,-2.039063 0.839843,-0.960937 2.878907,-0.71875 0.839843,-0.240235 1.199219,0.359375 3,0.480469 0.59961,0 0.121093,-0.242188 2.039063,-4.917968 0.839844,-1.199219 1.080078,-0.841797 0.240234,0 0.71875,1.080078 0.121094,0 1.679687,0.121094 4.558594,-2.041016 0.361328,-0.11914 3.359375,-3.240235 1.439453,-1.919922 0.359375,-0.720703 0.480469,-1.558593 -0.359375,-0.121094 0.720703,-0.59961 0.119141,-0.11914 0,-0.240235 0,-0.359375 0.11914,-0.601562 0,-0.839844 -0.11914,-0.240234 0,-0.119141 -0.119141,-0.240234 0.839844,-0.59961 3.119141,-0.7207031 0.240234,0 1.199219,0.4804691 0.11914,0 3.480469,1.798828 0.960938,1.560547 0.478515,0.720703 0.720703,0.359375 3.359375,-0.480469 2.039063,-1.199218 0.839844,-1.080079 2.40039,0.958985 0.359375,0.480469 0.240235,0.240234 1.201171,0.121094 0.478516,-0.720703 0.601563,-1.199219 0,-0.240234 -1.441407,-0.720704 -0.71875,-0.11914 -0.482422,-1.5605474 0.121094,-0.7207031 0.361328,-2.0390626 0.240235,-0.4804687 1.558593,-0.4785156 0.71875,-0.3613281 0.480469,-0.2382813 -0.11914,-0.8417969 2.039062,-0.4785156 1.560547,-0.3613281 z"
Ich hab’ keine Ahnung von D3, aber allgemein ist so eine Überschneidungsberechnung zwischen beliebigen Paths ggf. recht kompliziert. Websuchen liefern schnell sowas wie KevLinDev - GUI - Math Objects , aber …Ich denke, dass in diesem Fall eine (VIEL!!!) einfachere Lösung existieren könnte: Bestimmte Details der Beschreibung sind nicht ganz klar, aber könntest du nicht einfach prüfen, ob alle Ecken eines solchen Hexagons im Path enthalten sind (oder eben nicht)? Ja, das könnte leicht andere Ergebnisse bringen, als ein “echter” Überdeckungstest - aber ein “echter” Test ist ggf. schon SEHR aufwändig (und könnte auch Artefakte verursachen).
Wie würde eine Prüfung darauf aussehen ob das Hexagon im Path liegt?
Wenn’s da konkret werden soll, kann ich nur nochmal betonen: Ich hab’ von D3 keine Ahnung (aber vielleicht probier’ ich es bei Gelgenheit mal aus). Meine Frage war eher “übergeordnet”, “fachlich” (und weniger in bezug auf die Implementierung).
Nämlich:
Wenn letzteres reicht, könnte ich erstmal nur mit schnellen Websuchergebnissen wie https://github.com/d3/d3-polygon ankommen, aber vielleicht hilft das ja schon (ich persönlich müßte jetzt schauen: Wie verwandelt man einen SVG path in so ein Polygon? Aber vielleicht ist das trivial, und ich sehe es nur nicht…)
Wie ich es hin bekommen, dass die Hexagone ausschließlich in der Karte liegen, ist mir persönlich total egal. Hauptsache es funktioniert.
Mir fehlt das Wissen, wie ich prüfen kann, ob ein Hexagon im Path, Polygon oder sonstwo liegt.
Bei den aufwendigen Grafiken welche mit D3.js erstellt werden und im Netz zu finden sind, hätte ich nicht gedacht, dass mein Vorhaben so schwer umzusetzen sein soll 
ist die gesamte Fläche in Hexagone aufgeteilt,
planst du in etwa, zu einer Karte die innen liegenden Haxagone wie auf einer Civilisation 5-Map abzubilden? 
Imgur: The most awesome images on the Internet
mein Vorschlag wäre dann, vom Path aus auszugehen: wo ist der erste Punkt, welches Hexagon trifft der → Hexagon X markieren als Grenzhexagon,
den Path entlang zum nächsten Punkt gehen, in welchem Hexagon Y liegt der, falls dasselbe oder benachbart dann ok,
wobei theoretisch ein drittes Hexagon Z dazwischen gestreift werden kann, das ließe sich berechnen falls wichtig,
wenn Abstand zwischen X und Y, dann die Hexagon dazwischen bestimmen,
nach kompletten Durchgang sollte eine Kette von Grenzhexagon bestimmt sein,
danach kann man die Mengen innen/ außen anschauen, was immer nötig,
alles gewisse Aufgaben, ob es das irgendwo fertig gibt, möglich immer, aber schwierig ob auch passend,
vielleicht zu ‚hexagon map‘ usw. suchen, falls ich überhaupt das Richtige getroffen habe
was D3.js kann, inwiefern überhaupt JavaScript geeignet, keine Ahnung (evtl. spezielleres JavaScript-Forum schauen), mir schaudert es bei der Vorstellung
ich sehe überall nur Java-Hämmer und -Nägel ;),
dort wäre alles einzulesen, eine Modell mit Koordinaten-Welt, Hexagon als Objekte usw. zu erstellen und viel zu rechnen,
eine größere Aufgabe aus dem Nichts heraus
und wohl nur hilfreich wenn einmalig zu bestimmen, nicht im aktuellen Programm immer wieder, was immer du für ein Programm haben magst
Das hier zeichnet zwei Quadrate (die Pfade), und ein Hexagon, und gibt aus, dass das Hexagon komplett im Pfad A (grün) liegt, aber nicht komplett im Prad B (rot).
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3-polygon.v1.min.js"></script>
<script>
var hexagonCorners = [
[ 1.5 , 0.5 * 1.732 ],
[ 0 , 1 * 1.732 ],
[-1.5 , 0.5 * 1.732 ],
[-1.5 , -0.5 * 1.732 ],
[ 0 , -1 * 1.732 ],
[ 1.5 , -0.5 * 1.732 ]
];
var pathA = [
[ -2 , -2 ],
[ 2 , -2 ],
[ 2 , 2 ],
[ -2 , 2 ]
];
var pathB = [
[ -1 , -1 ],
[ 3 , -1 ],
[ 3 , 3 ],
[ -1 , 3 ]
];
var allInA = true;
var allInB = true;
for(var i = 0; i < hexagonCorners.length; i++) {
var hexagonCorner = hexagonCorners**;
allInA &= d3.polygonContains(pathA, hexagonCorner);
allInB &= d3.polygonContains(pathB, hexagonCorner);
}
d3.select("body").append("span")
.text("allInA " + allInA +", allInB "+allInB);
var dx = 3.0;
var dy = 3.0;
var scale = 20;
var svgContainer = d3
.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 400)
// Path A
svgContainer
.append("polygon")
.attr("points",function(d) {
return pathA.map(function(d) {
return [(d[0]+dx)*scale,(d[1]+dy)*scale].join(",");
}).join(" ");
})
.attr("fill","none")
.attr("stroke","green")
.attr("stroke-width",2);
// Path B
svgContainer
.append("polygon")
.attr("points",function(d) {
return pathB.map(function(d) {
return [(d[0]+dx)*scale,(d[1]+dy)*scale].join(",");
}).join(" ");
})
.attr("fill","none")
.attr("stroke","red")
.attr("stroke-width",2);
// Path Hexagon
svgContainer
.append("polygon")
.attr("points",function(d) {
return hexagonCorners.map(function(d) {
return [(d[0]+dx)*scale,(d[1]+dy)*scale].join(",");
}).join(" ");
})
.attr("fill","none")
.attr("stroke","blue")
.attr("stroke-width",2);
</script>
<br>
</body>
(Nochmal: Ich habe keine Ahnung von D3 und JS, das ist nur schnell zusammengepfuscht - aber zeigt, dass das “polygonContains” zumindest funktionieren sollte…)