CODEWITHSUNDEEP
javascriptd3.js
Bonny AUlia
Bonny AUlia

Reputation: 95

Text label hides in circle d3

i've stuck for this code. Im trying to add text behind the circle and sample code like this

for the text:

        g.selectAll(".my-text")
            .data(marks)
            .enter().append("text")
            .attr("class", "text-desc")
            .attr("x", function(d, i) { 
                return projection([d.long, d.lat])[0]; 
            })
            .attr("y", function(d, i) { 
               return projection([d.long, d.lat])[1]; 

            })
            .attr('dy', ".3em")
            .text(function() { return location})
            .attr("text-anchor", "middle")
            .attr('color', 'white')
            .attr('font-size', 15)

and for circle like this

             g.selectAll(".circle")
                .data(marktests)
                .enter().append("circle")
                .attr("class", "bubble")
                .attr("cx", function(d, i) {
                     return projection([d.long, d.lat])[0]; 
                })
                .attr("cy", function(d, i) {
                    return projection([d.long, d.lat])[1]; 
                })
                .attr("r", function() { 
                    return myRadius(locationGroup + 20);
                })
                .on('mouseover', tipBranch.show)
                .on('mouseout', tipBranch.hide)
                .on('click', function(d){
                    window.open('http://localhost:8000/detail/'+d.branch);
                });
           }

but i got result just like this

enter image description here

and the elements if using inspect element enter image description here

Thank you if you can help to help me and explain how to solve the problem code

Upvotes: 0

Views: 119

Answers (1)

Cornel Stefanache
Cornel Stefanache

Reputation: 668

First of all I noticed the following issue:

 g.selectAll(".my-text")
            .data(marks)
            .enter().append("text")
            .attr("class", "text-desc")

Also the following line: .text(function() { return location}) is faulty because you are missing the data object that you iterate with. This might be changed to: .text(function(d) { return d.location})

you are selecting all elements with class .my-text but then you are attaching text-desc as class to the text elements. The correct change for this would be:

 g.selectAll(".text-desc")
            .data(marks)
            .enter().append("text")
            .attr("class", "text-desc")

considering that you want to use text-desc as a class. the same problem is with the circle as well: Either do: g.selectAll("circle") to select the circle tag elements or g.selectAll(".bubble") to select the bubbles.

You are also using different iterating objects for text and circles - usually you should iterate over a single collection.

Another issue with the sample is that location and locationGroup are not part of the collection items. I would expect that the values to be taken from the data object as such .text( d => d.location) and .attr("r", d => myRadius(d.locationGroup)). Before proceeding make sure that you populate iterating items with this properties.

Another approach would be to do the following:

const group = 
    g.selectAll('.mark')
     .data(marks)
     .enter()
     .append('g')
     .attr('class', 'mark')
     .attr('transform', d => {
        const proj = projection([d.long, d.lat])
        return `translate(${proj[0]}, ${proj[1]})`;
      })

group.append('text').text(d => return d.location) //apply other props to text
group.append('circle').text(d => return d.location) //apply other props to circle

Using this approach will allow you to iterate the collection with a group element and use translation property in order to move the group to the location (small improvement, projection will be executed once) and use the group to populate with other elements: text, circle.

Hope it helps.

Upvotes: 1

Related Questions