如何使用 d3.js 根据数据确定 SVG 形状

Question

这与我之前提出的一个较早的问题有关：How to add filled sections to SVG circles using d3.js

这一次，我想根据人是女性还是男性来创建一个形状。如果这个人是女性，我想创建一个圈子。如果我创建的人是男性，我想创建一个正方形。

到目前为止，我能够创建两种形状，但我不知道如何调用函数来确定我想要的形状。

这是我的小提琴：https://jsfiddle.net/g8wLtrc9/

我的小提琴中的这段代码是我尝试确定我的形状：

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);});

Answer 1

我尝试移除外圈并将正方形仅用于鼠标悬停事件。它现在是一个完全透明的rgba(0,0,0,0)“hitbox”。也防止了小家庭圈子和d.sex === 'f' || d.type === 'family'成正方形

馅饼/正方形切片足以绘制完整的形状，您已经成功完成了。我认为您应该尝试在小部分上应用描边/填充选项，并将悬停事件留给一个透明的大框，这样您就不需要重复应用它。 （当然，直到您希望这些较小的部分触发单独的事件）

这是您目前编辑的 JSFiddle：https://jsfiddle.net/wa30rgb2/1/