Question

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

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

到目前为止，我可以创建两个形状，但是我不知道如何调用函数来确定所需的形状。

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

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/

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

1 个答案: