Javascript d3.js人体形状和指针应用程序

我需要建立一个人地图，使用自定义d3形状。每个人都会有一个点和一个标记脱落-标记特定的质量

开发形状模板——可能模仿各种生物类型——男性/女性、运动型/瘦型/矮胖型——会很好

我有一些注释掉的标签代码。我很好奇如何使用超级公式的方法来创造一个人的形状。以及在头部放置一个圆圈，并朝标签方向绘制一个标记

        //var shapeData = d3.superformulaTypes;
 var shapeData = ["star"];
        //console.log("shapeData", shapeData);


        svg.selectAll("a")
            .data(shapeData)
          .enter().append("a")
            .attr("xlink:title", String)
            .attr("transform", function(d, i) { return "translate("+ x(d) + ",40)"; })
          .append("path")
            .attr("class", "small")
            .attr("d", small)
            .on("mousedown", function() { d3.select(this).style("fill", "aliceblue"); })
            .on("mouseup", function() { d3.select(this).style("fill", null); })
            .on("click", function(d) { d3.select(".big").transition().duration(500).attr("d", big.type(d)); });



        svg.append("path")
            .attr("class", "big")
            .attr("transform", "translate(250,150)")
            .attr("d", big);

---

我已经建立了标签的一部分，可以坐在上面的人的形状。现在，我们需要帮助尝试更容易地构建人体形状

下面是指针的代码

我目前关于构建人形的研究——包括尝试修改星形或创建多边形。是否有一种更平滑、精确/数学、自动的方法来构建人形。比如建立一个自定义的星星，然后相应地旋转它

**最新代码-“现在用于生成图形的生物特征数据”

我开发了一个多边形形状工具，可以创建多种人类形状。我将有兴趣完善这个方法，用于创建用户的虚拟化身。考虑身高/体型/性别等参数

---

-我开始尝试画一个看起来有点疯狂的人，但这是一个开始我已经设法用这个多边形形状画了一个小男人-但是有更好的方法吗？创建了一个点标记-非常像我需要的-现在包括了所有的标签-如果可以添加更多的标签控制-比如标签上方或下方的线条，或者镜像尾巴-最新的例子-开始将其合并在一起-添加基本的生物特征数据，如性别、种族和体型。-最新版本具有控制图表宽度/高度的比率-此版本现在使用生物特征数据-因此，如果您可以更改用户的种族、性别、体型，它将相应地生成一个人形

var personBuilder = {
    init: function(){


        var size = 300;

        var x = d3.scale.ordinal()
            .domain(d3.superformulaTypes)
            .rangePoints([0, 360], 1);

        var svg = d3.select("#person").append("svg")
            .attr("width", 560)
            .attr("height", 300);

         this.circles = svg.append("g")
            .attr("class", "circles") 

         this.labels = svg.append("g")
            .attr("class", "labels")

         this.pointers = svg.append("g")
            .attr("class", "pointers")

        this.addLabels();
    },
    addLabels: function(){
        var that = this;
        var data = [
            {
                "label": "Imagination",
                "y": 20,
                "x": 50,
                "radius": 7,
                "cx": 100,
                "cy": 150
            },
            {
                "label": "Love",
                "y": 20,
                "x": 300,
                "radius": 7,
                "cx": 300,
                "cy": 150
            },
            {
                "label": "Careeh",
                "y": 270,
                "x": 165,
                "radius": 7,
                "cx": 200,
                "cy": 150
            }
        ]

               //__circles
                                var circs = that.circles.selectAll("circle")
                                                                  .data(data);


                                // Enter
                                circs.enter()
                                    .append("circle")
                                     .attr("class", "node")
                                      .attr("cx", function (d) { return d.cx; })
                                      .attr("cy", function (d) { return d.cy; })
                                      .attr("r", 1)
                                      .style("fill", function (d) { return "green"; })
                                      //.call(methods.force.drag);

                                // Update
                                circs
                                    .transition()
                                    .delay(300)
                                    .duration(1000)
                                      .attr("r", function (d) { return d.radius; })

                                // Exit
                                circs.exit()
                                    .transition()
                                    .duration(250)
                                    .attr("cx", function (d) { return d.cx; })
                                    .attr("cy", function (d) { return d.cy; })
                                    .attr("r", 1)
                                    .remove();


              //__labels  
                var labels = that.labels.selectAll("text")
                    .data(data);

                labels.enter()
                    .append("text")
                    .attr("text-anchor", "middle")


                labels
                    .attr("x", function(d) {
                        return d.x;
                    })
                    .attr("y", function(d) {
                       return d.y;
                    })
                    .text(function(d) {
                        return d.label; 
                    })
                    .each(function(d) {
                        var bbox = this.getBBox();
                        d.sx = d.x - bbox.width/2 - 2;
                        d.ox = d.x + bbox.width/2 + 2;
                        d.sy = d.oy = d.y + 5;
                    })
                    .transition()
                        .duration(300)

                labels
                    .transition()
                    .duration(300)      

                labels.exit().remove();
                //__labels            




                //__pointers
            that.pointers.append("defs").append("marker")
                    .attr("id", "circ")
                    .attr("markerWidth", 6)
                    .attr("markerHeight", 6)
                    .attr("refX", 3)
                    .attr("refY", 3)
                    .append("circle")
                    .attr("cx", 3)
                    .attr("cy", 3)
                    .attr("r", 3);

                var pointers = that.pointers.selectAll("path.pointer")
                    .data(data);

                pointers.enter()
                    .append("path")
                    .attr("class", "pointer")
                    .style("fill", "none")
                    .style("stroke", "black")
                    .attr("marker-end", "url(#circ)");

                pointers
                    .attr("d", function(d) {
                        if(d.cx > d.ox) {
                            return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
                        } else {
                            return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
                        }
                    })
                    .transition()
                        .duration(300)

                pointers
                    .transition()
                    .duration(300)      

                pointers.exit().remove();

                //__pointers    

    }
}


personBuilder.init()

var flow_shapes = {
    femaleStandard: function(h, w) {

         var points = [
            [w*.32, h*.33], [w, -h*.22], [w*.98, -h*.33], [w*.33, h*.13], // left arm
          [w*.23, h*.13], [w*.21, -h*.22], // left waist
          [w*.54, -h*.44], [w*.45, -h*.54], [w*.25, -h*.54], [w*.65, -h*.94], [w*.28, -h], [w*.11, -h*.65], //left leg
            [0, -h*.65], //groin
          [-w*.11, -h*.65], [-w*.28, -h], [-w*.65, -h*.94], [-w*.25, -h*.54], [-w*.45, -h*.54], [-w*.54, -h*.44] ,//right leg
           [-w*.21, -h*.22], [-w*.23, h*.13], // right waist
            [-w*.33, h*.13], [-w*.98, -h*.33], [-w, -h*.22], [-w*.32, h*.33], // right arm
           [-w*.09, h*.56], [-w*.11, h*.78], [w*.11, h*.78], [w*.09, h*.56], // head
        ]
        points.push(points[0]); //complete shape - closes off the shape by joining the last and first points

        return d3.svg.line()(points);
    },
    maleSkinny: function(h, w) {

         var points = [
            [w*.32, h*.37], [w, -h*.29], [w*.98, -h*.38], [w*.38, h*.19], // left arm
          [w*.23, h*.13], [w*.21, -h*.22], // left waist
          [w*.45, -h*.94], [w*.28, -h], [w*.11, -h*.35], //left leg
            [0, -h*.25], //groin
          [-w*.11, -h*.35], [-w*.28, -h], [-w*.45, -h*.94], //right leg
           [-w*.21, -h*.22], [-w*.23, h*.13], // right waist
            [-w*.38, h*.19], [-w*.98, -h*.38], [-w, -h*.29], [-w*.32, h*.37], // right arm
           [-w*.09, h*.56], [-w*.11, h*.78], [w*.11, h*.78], [w*.09, h*.56], // head
        ]
        points.push(points[0]); //complete shape - closes off the shape by joining the last and first points

        return d3.svg.line()(points);
    },
    maleStandard: function(h, w) {

         var points = [
            [w*.32, h*.37], [w, -h*.29], [w*.98, -h*.34], [w*.45, h*.1], // left arm
          [w*.26, h*.13], [w*.25, -h*.22], // left waist
          [w*.52, -h*.97], [w*.28, -h], [w*.11, -h*.35], //left leg
            [0, -h*.25], //groin
          [-w*.11, -h*.35], [-w*.28, -h], [-w*.52, -h*.97], //right leg
           [-w*.25, -h*.22], [-w*.26, h*.13], // right waist
            [-w*.45, h*.1], [-w*.98, -h*.34], [-w, -h*.29], [-w*.32, h*.37], // right arm
           [-w*.09, h*.56], [-w*.11, h*.81], [w*.11, h*.81], [w*.09, h*.56], // head
        ]
        points.push(points[0]); //complete shape - closes off the shape by joining the last and first points

        return d3.svg.line()(points);
    },
    maleMuscular: function(h, w) {

         var points = [
            [w*.32, h*.41], [w, -h*.27], [w*.95, -h*.37], [w*.45, h*.1], // left arm
          [w*.32, h*.13], [w*.25, -h*.22], // left waist
          [w*.52, -h*.97], [w*.28, -h], [w*.15, -h*.35], //left leg
            [0, -h*.19], //groin
          [-w*.15, -h*.35], [-w*.28, -h], [-w*.52, -h*.97], //right leg
           [-w*.25, -h*.22], [-w*.32, h*.13], // right waist
            [-w*.45, h*.1], [-w*.95, -h*.37], [-w, -h*.27], [-w*.32, h*.41], // right arm
           [-w*.09, h*.59], [-w*.11, h*.87], [w*.11, h*.87], [w*.09, h*.59], // head
        ]
        points.push(points[0]); //complete shape - closes off the shape by joining the last and first points

        return d3.svg.line()(points);
    }   
}

var nodes = [    
    {NodeType: "maleSkinny", x:0, y:50, height:60, width: 50},
    {NodeType: "maleStandard", x:130, y:50, height:60, width: 50},
    {NodeType: "maleMuscular", x:230, y:50, height:60, width: 50},
    {NodeType: "femaleStandard", x:350, y:50, height:60, width: 50}
]

svg = d3.select("body")
    .append("svg:svg")
    .attr("width", 600)
    .attr("height", 600)
        .append("g")
            .attr("transform", "translate(120,120)");

svg.selectAll("path")
.data(nodes).enter().append("svg:path")
.attr("d", function(d) { return flow_shapes[d.NodeType](d.height, d.width);})
.attr("stroke", "black")
.attr("fill", "grey")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ") rotate(180)"
});