d3小發現---------增長兩個字符（「~~」），圖形所有變化

時間 2019-11-16

標籤 d3 發現增長兩個字符圖形所有變化简体版

原文原文鏈接

此例子是動態的增長不一樣形狀的圖形，但去掉~~後形狀只爲圓形javascript

<!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.有「~~」
html