CODEWITHSUNDEEP
javascriptd3.jssvg
user1647160
user1647160

Reputation: 531

How to determine a SVG shape based off of data using d3.js

This is related to an earlier question that I asked earlier: How to add filled sections to SVG circles using d3.js

This time, I want to create a shape depending on if the person is a female or male. If the person is a female, I want to create a circle. If the person I create is a male, I want to create a square.

So far, I'm able to create both shapes, but I don't know how to call a function to determine which shape I want.

Here is my fiddle: https://jsfiddle.net/g8wLtrc9/

This block of code from my fiddle is my attempt to determine my shape:

var shapes = node.append("g")
       shapes.enter()
       .append('g')
       .each(function(d){
         var g = node.select(this);
          if(d.sex === 'f'){
            g.attr("class", "circle")
            g.append("circle")
            g.attr("r", function(d){ 
              return d.type == "family" ? family_radius : 40;
                })
          }
          else{
            g.attr("class", "rect")
            g.append("rect")
            g.attr("width", 80)
            g.attr("height", 80)
            g.attr("x", -40)
            g.attr("y", -40)
          }
       })

       .attr("fill",function(d,i){ 
         if(d.type == "family"){return "white"}
        else{return "url(#my_image" + i + ")"}})

        .attr("stroke", function(d){
          if (d.type == "family"){return "gold";
          } else { if(d.sex == "m"){return "blue"
          } else {  return "#ed1851"}}})
          .attr("stroke-width","4px")
          .on("mouseover", function(d){
            if(d.type !== "family"){
              t_text = "<strong>" + titleCase(d.name) + "</strong><br>Age: " + d.age
              if(d.relationship !== undefined){
                t_text += "<br>Relationship: " + d.relationship}
              tooltip.html(t_text)
              return tooltip.style("visibility", "visible");
            }  })
           .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
           .on("mouseout", function(){return tooltip.style("visibility", "hidden");})
           .on("click", function(d){return details(d);});

Upvotes: 1

Views: 175

Answers (1)

TheWandererLee
TheWandererLee

Reputation: 1032

I've tried by removing the outer circle and using the square only for mouseover events. It is a completely transparent rgba(0,0,0,0) "hitbox" now. Also prevented the small family circles from becoming squares with d.sex === 'f' || d.type === 'family'

The pie/square slices are enough to draw the full shape, you have done that successfully. I think you should try to apply the stroke/fill options on the small portions and leave the hover events to a transparent larger box so you don't need to apply it repetitively. (Until, of course, you want these smaller sections to fire separate events)

Here's your JSFiddle edited so far: https://jsfiddle.net/wa30rgb2/1/

Upvotes: 1

Related Questions