Question

enter image description here

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

开发形状模板会很好 - 可能模仿各种生物类型 - 男/女，运动/瘦/邋。

我有一些注释掉标签的代码。我很好奇如何使用Superformula方法创建人体形状。除了在头上放置一个圆圈并在标签上绘制标记。

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

enter image description here

我已经建立了可以放在人体形状顶部的标签部分。现在需要帮助尝试更容易地构建人体形状。

http://jsfiddle.net/NYEaX/243/

这是指针的代码。

我目前关于构建人体形状的研究 - 涉及尝试修改星形或创建多边形。是否有更平滑，准确/数学，自动的方式来建立类似人的形状。就像建立一个自定义的星星，然后相应地旋转它？

http://jsfiddle.net/4xXQT/153/ http://jsfiddle.net/NYEaX/241/

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()

Answer 1

**最新代码 - http://jsfiddle.net/NYEaX/369/＆＃34;现在用于生成数字的生物识别数据＆＃34;

enter image description here

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

http://jsfiddle.net/5CfGG/40/

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

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

1 个答案: