D3 Karte SVG Leistung

Question

Ich habe in den letzten Tagen gekämpft, um die Leistung auf einer D3-Karte zu optimieren, vor allem auf dem Handy. Ich verwende SVG-Transformationen zum Zoomen und Schwenken, habe aber die folgende Beobachtung gemacht: Das Overkill kommt von Pfadstrichen, die dazu verwendet werden, Abstände zwischen Ländern zu fälschen.

http://www.nicksotiriadis.gr/d3/d3-map-1.html

http://www.nicksotiriadis.gr/d3/d3-map-2.html

Der einzige Unterschied zwischen den beiden Karten ist der Hubweg entlang der Feldwege, und der Unterschied in der Leistung:

Ich habe ein Paar Probenkarten zum Vergleich hochgeladen ist sogar auf Desktop-Geräten spürbar - aber auf Mobilgeräten deutlicher. Das Entfernen der Pfadstriche macht mobile Leistung zum Kinderspiel.

Ich habe alle Arten von SVG-Stroke-Shape-Rendering-Optionen ohne signifikante Ergebnisse versucht.

Nun zu der Frage. Gibt es eine Möglichkeit, eine dünne Grenze aus jedem Land zu entfernen, um den Abstand zwischen den Ländern zu fälschen anstatt einen Schlag zu verwenden?

Wenn jemand anderes einen anderen Vorschlag hat, würde ich es gerne hören!

Update: Erklärungsfoto anfügen.

Was ich gezeichnet habe, ist dies. Der rote Pfeil zeigt auf die Landfugen. Wenn Sie den Landpfaden einen Strich in einer Farbe hinzufügen, die dem Hintergrund der Länderpfade entspricht (hier in dunkelgrauer Farbe), entsteht der Eindruck, dass die Länder voneinander getrennt sind. Dies führt jedoch zu einem ernsthaften Leistungseinbruch auf Mobilgeräten. Was ich suche, ist irgendwie die Länderpfade so umzuformen, dass ihre Grenzlinien dort sind, wo der blaue Pfeil zeigt, aber ohne einen Schlag zu haben.

Update 2: Die Leute scheinen nicht in der Lage sein zu verstehen, was ich suche, so dass ich die Aktualisierung dieser um die Frage noch deutlicher zu machen.

Nehmen wir an, dass die ursprünglichen Länder Pfade auf der linken Seite dieses Bildes angezeigt werden. Nach was ich suche, ist ein Weg, dass ich irgendwie die Wege nach innen "kontrahieren" kann, so dass die neu geschaffenen Wege, die in Rot gezeigt sind, genügend leeren Raum zwischen ihnen lassen, die einen Schlag zwischen ihnen emulieren werden.

Dadurch wird eine zusätzliche Ebene von Strichen nicht genutzt, und Sie erhalten nur durch die Verwendung von Pfaden anstelle von Pfaden + Strichen Performance.

Update 2: Hallo nochmal, ich habe anscheinend eine halbe Lösung für mein Problem gefunden. Ich habe es geschafft, den Topojson zu Shapefile zu extrahieren, die Shapefile so zu bearbeiten, wie ich will (benutzt ein Programm mit dem Namen OpenJump), aber die Konvertierung entfernt alle Topojson - Eigenschaften, die ich brauche - ID, Name des Landes, also kann ich nicht zurück konvertieren ursprünglicher Topojson.

Hat jemand irgendwelche Vorschläge?

Answer 1

Schließlich die Antwort gefunden. Dies verbessert die Leistung der d3-Karte radikal!

1) Ich habe meine Topojson-Datei und extrahiert in Shapefile mit mapshaper.org. Dies ergibt 3 Dateien: .shp, .shx, .dbf. Von was ich realisierte die .dbf Datei enthält alle TopoJSON Eigenschaften/Attribute.

2) eröffnete die SHP Formdatei http://www.openjump.org/ zu Openjump - das ist die DBF Datei auch automatisch importiert.

3) Ich wählte die Länderebene und ging zu Werkzeuge> Analyse> Puffer.

4) Überprüft die Update geometry in source layer Box, so dass die Geometrie bearbeitet wird, ohne den Rest der Attribute/Eigenschaften zu verlieren und fügte einen negativen Fixed Distance -0,1. Das hat alle Ländergeometrien auf das Ergebnis reduziert, nach dem ich gesucht habe.

5) Gespeichert Datensatz als ESRI Shape-Datei

6) Reimportierte BEIDESHP und DBF, die von Openjump zurück zu mapshaper.orgproduziert wurden - vorsichtig, beide Dateien.

7) Exportiert als TopoJSON. Enthält neue Form und alle ursprünglichen Eigenschaften/Attribute!

Der folgende Link wurde mit der neu erstellten Karte aktualisiert; wir haben ein "begrenztes" Aussehen ohne die Notwendigkeit von Strichen.

http://v7.nicksotiriadis.gr/d3/d3-map-1.html

Vergleichen Sie die Leistung auf diesen Link, der den ursprünglichen Formen + Hub hat. Bitte versuchen Sie es auf dem Handy, um den Leistungsunterschied zu sehen!

http://v7.nicksotiriadis.gr/d3/d3-map-2.html

Auch hier ist die Karte TopoJSON Datei, falls jemand aktualisiert Welt etwas mehr Leistung will! : D

http://v7.nicksotiriadis.gr/d3/js/world-topo-bordered.json

Answer 2

D3 hat eine Sache nur dafür: topojson.mesh() (siehe documentation). Die Idee ist, dass, da die meisten Länder Grenzen teilen, die gemeinsamen Grenzen nicht zweimal gezogen werden müssen. Wenn Sie jeden Rahmen nur einmal zeichnen können, wird die Anzahl der zu zeichnenden Striche um bis zu 80% reduziert.Die Mesh-Methode führt die JavaScript-Verarbeitung aus, um eine Reihe geschlossener Formen (Länder) in den mehrzeiligen Pfad nur der Grenzen zwischen ihnen zu verwandeln. Sie können diesen mehrzeiligen Pfad dann in ein einzelnes <path>-Objekt zeichnen, das Sie über den Füllungen positionieren.

Das Netz sieht like this. Hier ist another example.

Answer 3

Es könnte ein paar Gründe für dieses Verhalten sein (auf meinem Computer, alles mit der gleichen Geschwindigkeit arbeiten gut):

Browser

Welchen Browser Sie verwenden Sie? In Chrome funktionieren Ihre Beispiele perfekt.

TopoJson

zB. vorherige Antwort.

Animation,

Sie die Animation starten, wenn die Seite geladen wird. Vielleicht möchten Sie eine Verzögerung hinzufügen (Animation(). Verzögerung (in ms)). Es gibt auch eine Funktion in D3: queue(), https://github.com/mbostock/queue, die die Daten vor dem Start einer Funktion laden.

-

Wenn keiner das Ihr Problem ändern, und wenn Sie es wollen auf mobilen gut funktionieren, können Sie versuchen, D3 und Leaflet (Karte für Handys) zu mischen, die in der Bezeichnung der Leistung groß ist durch Laden von Fliesen.

Ein Beispiel:

http://bl.ocks.org/zross/6a31f4ef9e778d94c204

Hoffe, es hilft