put a border to all regions of a map d3.js

Question

put a border to all regions of a map d3.js

Navigation

#1 by (0 votes)

1

I am new to this community. I have a map where I draw several regions, departments and municipalities. a department has municipalities. I want to assign a color to the borders of all the municipalities and a color. and another color to the edges of all the departments, as well as a color to paint them, but I do not know how to do so that the departments can put color to all the edges. the edges on the outside are not painted.

this is my code:

link

This is the json structure that paints the map, "depts" are the departments and "mpios" are the municipalities.

d3.js

asked by user5115790 01.08.2016 в 00:25

source

1 answer

In what way can I imitate a HorizontalScroollView other than using one? How to restart a JFrame in Java without closing it?

score 0 · Answer 1

This answer offers you two alternatives (although far from being ideal). I hope it will help you while you find some better method.

The problem you're facing now is similar to the one previous question , but different enough so that it can not be resolved in the same way. In that question you only drew an element of a single color, but now you have two elements (municipalities and departments) and each one has a different color. The black part is the municipalities that are painted without border, and the red part is only the separation between departments.

Alternative 1:

You could try to solve it just like the other question, the problem is that the "general" border will be the same color as you assign to the municipalities instead of the departments, which may be a bit strange. You can see this solution in this JSFiddle .

The idea is simply to add a border to the municipalities when they are created:

.style("stroke", "green")
.style("stroke-width", "1px")

Alternatively, you could save a lot of unnecessary code by putting it in CSS this way (you can see it working in this JSFiddle ):

.mpio {
  stroke:green;
  stroke-width:1px;
}

Alternative 2:

This alternative involves duplicating all the code that paints the municipalities, and adding a thicker border that you put after the municipalities, but the same color as the departments. In this way, the outer edge will be seen.

The bad thing about this alternative is that it doubles a lot of code and is far from ideal for it. You can see it working in this JSFiddle . The idea would be to add this code before the departments:

 var dept2 = g.selectAll(".mpio")
    .data(topojson.feature(co, co.objects.mpios).features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", "none")
    .style("stroke", "red")
    .style("stroke-width","2px");

Another bad thing: now the separation between municipalities looks a little darker red than the departments and you may not like it. You could solve it by adding a border to the municipalities (as you can see in this JSFiddle ).