D3 displays SVG performance

Question

In the past few days, I have been struggling to optimize performance on the D3 card, especially on mobile devices. I use SVG transforms for zooming and panning, but I made the following observation: the excess comes from the strokes of the path used to fake between countries.

I downloaded a couple of sample cards for comparison:

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

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

The only difference between the two cards is the path through the country's channels, and the difference in performance is even noticeable on desktop devices, but more obvious on mobile devices. Removing path strokes makes mobile productivity easy.

I tried all kinds of svg form rendering options without significant results.

Now to the question. Is there a way to remove the thin border from each country in order to fake an interval between countries instead of using a stroke?

If anyone has a different sentence, I would like to hear it!

Update: Attach an explanatory photo.

I drew this. The red arrow indicates the joints of the country. When you add a stroke in the same color as the background in the country’s path (shown in dark gray here), you get the feeling that the countries are divided - however, this adds a serious performance hit to mobile devices. What I'm looking for will somehow reformat the paths of countries so that their borders are where the blue arrow indicates, but without a stroke.

Update 2: People seem to be unable to understand what I'm looking for, so I am updating this to make the question even clearer.

Suppose the original country paths are shown to the left of this image. What I'm looking for is a way in which I can somehow “contact” the paths inward so that the newly created paths appear in red, leaving enough empty space between them that “mimics” the spacing between them.

Performing this, will not use an extra level of strokes, thereby increasing performance only by using paths instead of paths + strokes.

Update 2: Hello, again, it seems I have found half the solution to my problem. I managed to extract the topojson into a shapefile, edit the shapefile as I want (using a program called OpenJump), but the conversion removes all the topojson properties that I need - id, country name, so I can not convert back to the original topojson.

Does anyone have any suggestions?

Answer 1

Finally found the answer. This drastically improves the performance of the d3 card!

1) I got my topojson file and extracted to shapefile using mapshaper.org . This gives 3 files: .shp, .shx, .dbf . From what I understood, the .dbf file contains all the TopoJSON properties / attributes.

2) Opened the .shp form file in OpenJUMP http://www.openjump.org/ - which automatically imports the .dbf file.

3) I selected the country level and went to Tools> Analysis> Buffer .

4) Check the Update geometry in source layer field so that the geometry is edited without losing any other attributes / properties and a negative Fixed distance of -0.1 is added. This reduced the entire geometry of the country to the result I was looking for.

5) Saved dataset as ESRI Shapefile

6) Reimported BOTH .shp and .dbf that were created from OpenJUMP to mapshaper.org - careful, BOTH files.

7) Exported as TopoJSON . Contains a new form and all original properties / attributes!

The following link has been updated with the newly created map; we have a "limited" look without the need for strokes.

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

Compare performance with this link, which has original forms + stroke. Try using a mobile phone to see the difference in performance!

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

In addition, here is an updated TopoJSON map on the world map if someone wants extra performance !: D

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

Answer 2

D3 deals only for this: topojson.mesh() (see documentation ). The idea is that since most countries share borders, there is no need to use common borders twice. If you can draw each border only once, you will get an 80% reduction in the number of strokes you have to draw. The mesh method handles javascript to turn a bunch of closed shapes (countries) into a multi-line path with only the borders between them. You can then draw this multi-line path into a single <path> object, which you position on top of the fills.

The grid looks like this . Here is another example .

Answer 3

In this case, there may be several reasons (everything works fine on my computer at the same speed):

Browser

Which browser are you using? In Chrome, your examples work fine.

Topojson

eg. previous answer.

Animation

You start the animation when the page loads. You might want to add a delay (animation (). Delay (in ms)). D3 also has a function: queue (), https://github.com/mbostock/queue , which load data before running the function.

-

If none of this changes your problem, and if you want it to work fine on a mobile device, you can try mixing D3 and Leaflet (map for mobile phones), which is excellent in performance when loading fragments.

One example:

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

Hope this helps