0

I create a map with D3js by drawing path for the borders of my country and circle as markers. I am also using a rect and text to add a label to those circle

The problem is that on some place, I have a lot of markers near each others

map

In this case, some labels are not readable.

I found some other questions asked on SO : Multiple mark, How to handle Multiple Markers present at the same cooridnates,... But they are using a specific library to draw the map.

As you can see in the following code, I am only using path to draw the map manually

//Scale / translate / ...
var lineFunction = d3.svg.line()
    .x(function(d) {
        return (d.x + 5000) / 450;
    })
    .y(function(d) {
        return (-d.y + 170000) / 450;
    })
    .interpolate("linear");
var svg = d3.select(element)
    .append("svg")
    .style("width", "100%")
    .style("height", "100%")
    .attr("viewBox", "0 0 800 310");

var mainG = svg.append('g');
//Draw borders
var path = mainG.selectAll('path')
    .data($scope.bassins)
    .enter().append("path")
    .attr("d", function(d) {
        return lineFunction(d.borders);
    })

var station = mainG.append("g")
    .attr("class", "g_stations")
    .selectAll("stations")
    .data(stations)
    .enter()
    .append("g")
    .attr("class", "stations");

//Create each markers (circle)
station.append("circle")
    .attr("class", "marker")
    .attr("r", 5)
    .attr("cx", s => xCoordinate(s.coordinates.x))
    .attr("cy", s => yCoordinate(s.coordinates.y))
    .style("stroke-width", 0.5)
    .style("fill", "black")
    .style("stroke", "rgba(250,250,250,1)")
    .style("stroke-width", 0.5)

//Create the boxes for the label
station.append("rect")
    .attr("class", "stationBox")
    .attr("width", s => 5 + 4 * valuesToDisplay.toString().length)
    .attr("height", 10)
    .attr("x", s => xCoordinate(s.coordinates.x) - s.rectWidth)
    .attr("y", s => yCoordinate(s.coordinates.y) - 10)
    .attr("fill", "black")
    .style("cursor", "pointer")
    .style("stroke", "rgba(250,250,250,0.5)")
    .style("stroke-width", 0.5);

//Create the text to put inside the boxes 
station.append("text")
    .attr("class", "stationForecastLabel")
    .attr("x", s => xCoordinate(s.coordinates.x) - s.rectWidth)
    .attr("y", s => yCoordinate(s.coordinates.y) - 2)
    .attr("text-anchor", "right")
    .style("font-size", "0.7em")
    .style("fill", "white")
    .text(s => valuesToDisplay)
    .style("cursor", "pointer");

How can I make all the markers around the same place visible ?

I was thinking about letting the circle in the same place but using a line to link the label with the circle. The label won't need to be next to the circle anymore, it can be placed further. But how can it be achieved ?

Community
  • 1
  • 1
Weedoze
  • 13,683
  • 1
  • 33
  • 63
  • At least related, if not duplicate: [*"D3js: Automatic labels placement to avoid overlaps? (force repulsion)"*](/q/17425268). Interesting and challenging nonetheless +1. – altocumulus May 02 '17 at 12:28
  • The d3-labeller library seems to be the only possible working solution in my case. I will try it – Weedoze May 02 '17 at 12:38
  • @altocumulus D3-labeller seems fine but I cannot create a background for the text. If I don't have a rectangle behind, the text is not readable. Do you know how I can manage this ? – Weedoze May 03 '17 at 09:34
  • [*"Background color of text in SVG"*](/q/15500894) – altocumulus May 03 '17 at 09:37
  • @altocumulus I have to add a `rect` but this is not working with d3-labeller. The rectangle won't be behind the text – Weedoze May 03 '17 at 09:38
  • If you have difficulties implementing the solution of your choice, please post that as another question along with the code relevant to reproduce the issue. – altocumulus May 03 '17 at 09:44
  • @altocumulus I will update this question later – Weedoze May 03 '17 at 09:46
  • 1
    No, please don't do that! *This* question is about finding a solution to the labels placement problem. There are several answers to that in the question I linked to in my very first comment. If you made a choice based on that and are experiencing any difficulties implementing any those solutions, that would be well worth a new question. – altocumulus May 03 '17 at 09:49
  • @altocumulus Most of the answers are using only a label (without a background). This make a significant change – Weedoze May 03 '17 at 09:51

0 Answers0