d3小发现---------增加两个字符（“~~”），图形全部变化

此例子是动态的增加不同形状的图形，但去掉~~后形状只为圆形

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Force-Directed Symbols</title>
</head>
<body>
    <script type="text/javascript" src="d3.v3.min.js"></script>
    <script>
    var w=960,
        h=500,
        nodes = [], 
        node; 
    var svg=d3.select("body").append("svg")
              .attr("width",w)
              .attr("height",h);
    var colors = d3.scale.category10();
    var force = d3.layout.force()
                  .nodes(nodes)
                  .links([])
                  .size([w,h]);
    force.on('tick',function(e){   //redraw
        svg.selectAll("path")
           .attr('transform',function(d){
                console.log(d+ ";"+ d.x + ";" + d.y);
                return "translate("+d.x+","+d.y+")";
           });
    })
    console.log();

    nodes.push({

          type:d3.svg.symbolTypes[~~     
//无~~ 则所有的图形变为圆圈
(Math.random()*d3.svg.symbolTypes.length)],
          size:Math.random()*300+100 
         })
    force.start();
    setInterval(function(){
        nodes.push({
            type:d3.svg.symbolTypes[(Math.random()*d3.svg.symbolTypes.length)],
            size:Math.random()*300+100
        });
        force.start();

        svg.selectAll("path")
           .data(nodes)
           .enter()
           .append('path')
           .attr('transform',function(d){
            return "translate(" + d.x+","+d.y+")";
           })
           .attr("transform",function(d){
            return "translate(" +d.x +d.y +")";
           })
           .attr("d",d3.svg.symbol()
                .size(function(d) {
                    return d.size;
                })
                .type(function(d){
                    return d.type;
                }))
                .style("fill","steelblue")
                .style("stroke","white")
                .style("stroke-width","1.5px")
                .call(force.drag);

    },1000); 
    </script>
</body>
</html>

运行效果：
1.有“~~”
请输入图片描述

2.没有“~~”
请输入图片描述

d3小发现---------增加两个字符（“~~”），图形全部变化

Amyding929

引用和评论

Java实现通过日语元音ae的发音曲线分类9个发音者