동적 추가 네트워크 토폴로지 노드,svg 다운로드

효과
코드
html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>   title>
    <style>

        .link {

        }

        .node {
          cursor: move;
        }

        .node.fixed {
          fill: #000;
        }

        .dialog {
            display: none;
            position: absolute;
            top: 0;
            padding: 1em;
            font-size: 14px;
            border-radius: 0.5em;
            box-shadow: 0 0 20px #ccc;
            background: #fff;
            z-index: 10;
        }

    style>
head>
<body>
    <div><button id="download">  button>div>
body>
html>

js "d3 버전": "^3.5.17"


import 'd3'
import $ from 'jquery'

let graph = {
    "nodes": [
        {"x": 469, "y": 410},
        {"x": 493, "y": 364},
        {"x": 442, "y": 365},
        {"x": 467, "y": 314},
        {"x": 477, "y": 248},
        {"x": 425, "y": 207},
        {"x": 402, "y": 155},
        {"x": 369, "y": 196},
        {"x": 350, "y": 148},
        {"x": 539, "y": 222},
        {"x": 594, "y": 235},
        {"x": 582, "y": 185},
        {"x": 633, "y": 200}
    ],
    "links": [
        {"source":  0, "target":  1},
        {"source":  1, "target":  2},
        {"source":  2, "target":  0},
        {"source":  1, "target":  3},
        {"source":  3, "target":  2},
        {"source":  3, "target":  4},
        {"source":  4, "target":  5},
        {"source":  5, "target":  6},
        {"source":  5, "target":  7},
        {"source":  6, "target":  7},
        {"source":  6, "target":  8},
        {"source":  7, "target":  8},
        {"source":  9, "target":  4},
        {"source":  9, "target": 11},
        {"source":  9, "target": 10},
        {"source": 10, "target": 11},
        {"source": 11, "target": 12},
        {"source": 12, "target": 10}
    ]
};

document.oncontextmenu = function(){
　　return false;
}

let width = 960,
    height = 500,
    dialog = Dialog();

let force = d3.layout.force()
    .size([width, height])
    .nodes(graph.nodes)
    .links(graph.links)
    .charge(-700)
    .linkDistance(40)
    .on("tick", tick);

let drag = force.drag()
    .on("dragstart", dragstart);

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

let link = svg.selectAll(".link"),
    node = svg.selectAll(".node");

let nodes = force.nodes(),
    links = force.links();

restart(12);

let button = document.getElementById("download");
button.onclick = downLoad;

function tick() {
  link.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; });

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

function dblclick(d) {
  //d3.select(this).classed("fixed", d.fixed = false);
}

function dragstart(d) {
  //d3.select(this).classed("fixed", d.fixed = true);
}

//     
function Dialog(){
    let dialog = null;
    return (function(){
        if(dialog == null){
            let bodyEle = document.querySelector("body"),
            dialogHtml = `
                      ：
                "number" value="12" />
            
            "enter" type="button" value="  " />
            "cancel" type="button" value="  " />
            `;
            dialog = document.createElement("div");
            dialog.className = "dialog";
            dialog.innerHTML = dialogHtml;
            bodyEle.appendChild(dialog);
        }

        return dialog;
    })();  
}

function mouseRtClick(d,i){
    if(d3.event.button){
        dialog.style.left = d3.event.x+20+'px';
        dialog.style.top = d3.event.y+20+'px';
        dialog.style.display = 'block';
        dialog.querySelector("input[name='enter']").onclick = function(e){
            let node = {x: parseFloat(this.parentNode.style.left)-20, y: parseFloat(this.parentNode.style.top)-20};
            nodes.push(node);
            // add links to any nearby nodes
            links.push({source: node, target: d});
            restart(dialog.querySelector("input[type='number']").value);
            this.parentNode.style.display = 'none';
        };

        dialog.querySelector("input[name='cancel']").onclick = function(e){
            this.parentNode.style.display = 'none';
        };
    }
}


function downLoad(){
    $("svg")
        .attr("version", 1.1)  
        .attr("xmlns", "http://www.w3.org/2000/svg");

    let svg = document.querySelector("svg"),
        svgXml = svg.outerHTML,
        image = new Image(),
        canvas,
        context,
        a;

    //       base64   svg 
    image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml)));
    image.onload = function(){
        //     
        canvas = document.createElement('canvas');
        canvas.width = svg.width.animVal.value;//svg  
        canvas.height = svg.height.animVal.value;//svg  
        context = canvas.getContext('2d');  //     2d     

        //      ，            
        context.fillStyle   = "#fff";
        context.fillOpacity = "0";
        context.fillRect(0,0,canvas.width,canvas.height);

        context.drawImage(image, 0, 0);
        a = document.createElement('a');
        a.href = canvas.toDataURL('image/png');  //          png    
        a.download = "    .png";  //      
        a.click(); //      
    }


}

function restart(r) {

    link = link.data(links);
    link.enter().insert("line",".node")// line  circle  
        .attr("class", "link")
        .style("stroke","#000")
        .style("stroke-width",'1.5');

    node = node.data(nodes);
    node.enter().append("circle")
        .attr("class", "node")
        .attr("r", r)
        .style("fill",'#ccc')
        .style("stroke","#000")
        .style("stroke-width",'1.5')
        .on("dblclick", dblclick)
        .on("mousedown",mouseRtClick)
        .call(drag);

    force.start();

}

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

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

이탈리아 여행 지도 앨범을 Python으로 만들어 공유해 본 결과

밀라노 베네치아 피렌체 피사 로마 폼페이를 1주일에 돌는 투어로, 눈치채면 1000장 정도 사진을 찍고 있었습니다~. 거기 자유 시간도 있어 매일 1만 걸음 정도는 산책했기 때문에 루트 포함으로 기록에 남겨 두고 싶...

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

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

동적 추가 네트워크 토폴로지 노드,svg 다운로드

좋은 웹페이지 즐겨찾기