D3 학습: 파워 가이드 맵 레이아웃

오늘 아침 에 일어나 서 알고리즘 을 복습 한 NPC 의 증명 에 따 르 면 머리 가 뜨 거 워 요. 아 기 는 지금 힘 이 좀 부 족 했 어 요. 도서관 에 가서 D3 를 배 웠 는데 꿈 쩍 도 하지 않 았 어 요. 시험 이 있어 도 코드 코드 를 포기 하지 않 았 어 요. ~ 파워 가이드 그림 은 전에 복잡 한 것 을 배 웠 어 요. 그때 demo 에 따라 힘 든 아 기 는 반죽음 도 그 의 미 를 잘 이해 하지 못 했 어 요. 이번 에는...많이 좋아 진 것 같 아 요. 차근차근 해 야 죠 ~


<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>    title>
        <script type="text/javascript" src="../d3/d3.min.js">script>
    head>

    <body>
        <script type="text/javascript">
        var nodes = [{name:"  "},
                     {name:"  "},
                     {name:"  "},
                     {name:"  "},
                     {name:"  "},
                     {name:"  "},
                     {name:"  "}];
        var edges = [{source:0,target:1},
                     {source:0,target:2},
                     {source:0,target:3},
                     {source:1,target:4},
                     {source:1,target:5},
                     {source:1,target:6}];
        var width = 400,
            height = 400;

        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", width)
                    .attr("height", height);

        var force = d3.layout.force()
                      .nodes(nodes)
                      .links(edges)
                      .size([width,height])
                      .linkDistance(150)//      
                      .charge([-300]);//          
                      //    
        //             
        //                      
        //        

        force.start();//     

        console.log(nodes);
        console.log(edges);

        //         ，       

        var color = d3.scale.category20();

        //    
        var svg_nodes = svg.selectAll("circle")
                           .data(nodes)
                           .enter()
                           .append("circle")
                           .attr("r", 20)
                           .attr("fill", function (d, i) {return color(i);})
                           .call(force.drag);
                           //call         


        //    
        var svg_edges = svg.selectAll("line")
                           .data(edges)
                           .enter()
                           .append("line")
                           .attr("stroke","#ccc")
                           .attr("stroke-width",1);
        //    
        var svg_texts = svg.selectAll("text")
                           .data(nodes)
                           .enter()
                           .append("text")
                           .attr("fill","orange")
                           .attr("dx", 20)
                           .attr("dy", 8)
                           .text(function (d) {return d.name;});

        //          ，           
        //         ，              
        //                  
        //               
        //                
        //           

        force.on("tick", function () {
            svg_edges.attr("x1", function (d) {return d.source.x;})
                     .attr("y1", function (d) {return d.source.y;})
                     .attr("x2", function (d) {return d.target.x;})
                     .attr("y2", function (d) {return d.target.y;});

            svg_nodes.attr("cx", function (d) {return d.x;})
                     .attr("cy", function (d) {return d.y;});

            svg_texts.attr("x", function (d) {return d.x;})
                     .attr("y", function (d) {return d.y;});
        })

        //tick：    ，      

        script>
    body>
html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

오늘 아침 에 일어나 서 알고리즘 을 복습 한 NPC 의 증명 에 따 르 면 머리 가 뜨 거 워 요. 아 기 는 지금 힘 이 좀 부 족 했 어 요. 도서관 에 가서 D3 를 배 웠 는데 꿈 쩍 도 하지 않 았 어 요...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

D3 학습: 파워 가이드 맵 레이아웃

좋은 웹페이지 즐겨찾기