d3.js를 사용하여 원 스타일을 변경하는 방법

이 예는 d3.js.에 빌드 된 force-directed의 http://bl.ocks.org/1153292을 변경하려고합니다.d3.js를 사용하여 원 스타일을 변경하는 방법

Json의 유형에 따라 원 클래스를 만들고 싶습니다. CSS를 사용해야 할 것입니다.하지만 코드를 변경하여 적용하는 방법을 모르겠습니다.

이

나는

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
     <title>Mobile Patent Suits</title> 
     <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script> 
     <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script> 
     <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script> 
     <style type="text/css"> 

    circle { 
    fill: #ccc; 
    stroke: #333; 
    stroke-width: 1.5px; 
    } 

    text { 
    font: 10px sans-serif; 
    pointer-events: none; 
    } 

    text.shadow { 
    stroke: #fff; 
    stroke-width: 3px; 
    stroke-opacity: .8; 
    } 

     </style> 
    </head> 
    <body> 
     <script type="text/javascript"> 

    // http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/ 
    var links = [ 
    {source: "t1", target: "hate", type: "green"}, 
    {source: "t1", target: "good", type: "green"}, 
    {source: "t2", target: "hate", type: "green"}, 
    {source: "t3", target: "good", type: "green"}, 
    {source: "t4", target: "good", type: "green"}, 
    {source: "hate", target: "airport", type: "yellow"}, 
    {source: "good", target: "airport", type: "yellow"}, 
    {source: "good", target: "flight", type: "yellow"}, 
    ]; 

    var nodes = {}; 

    // Compute the distinct nodes from the links. 
    links.forEach(function(link) { 
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); 
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); 
    }); 

    var w = 960, 
     h = 500; 

    var force = d3.layout.force() 
     .nodes(d3.values(nodes)) 
     .links(links) 
     .size([w, h]) 
     .linkDistance(60) 
     .charge(-300) 
     .on("tick", tick) 
     .start(); 

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

    var path = svg.append("svg:g").selectAll("path") 
     .data(force.links()) 
    .enter().append("svg:path") 
     .attr("class", function(d) { return "link " + d.type; }) 
     .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); 

    var circle = svg.append("svg:g").selectAll("circle") 
     .data(force.nodes()) 
    .enter().append("svg:circle") 
     .attr("r", 6) 
     .call(force.drag); 

    var text = svg.append("svg:g").selectAll("g") 
     .data(force.nodes()) 
    .enter().append("svg:g"); 

    // A copy of the text with a thick white stroke for legibility. 
    text.append("svg:text") 
     .attr("x", 8) 
     .attr("y", ".31em") 
     .attr("class", "shadow") 
     .text(function(d) { return d.name; }); 

    text.append("svg:text") 
     .attr("x", 8) 
     .attr("y", ".31em") 
     .text(function(d) { return d.name; }); 

    // Use elliptical arc path segments to doubly-encode directionality. 
    function tick() { 
    path.attr("d", function(d) { 
     var dx = d.target.x - d.source.x, 
      dy = d.target.y - d.source.y, 
      dr = Math.sqrt(dx * dx + dy * dy); 
     return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; 
    }); 

    circle.attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    }); 

    text.attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    }); 
    } 

     </script> 
    </body> 
    </html>

는 아무도 나에게 힌트를 줄 수 없습니다 .... 지금까지 코드를 수정 한입니까? 감사합니다.

출처

2012-11-13 Devester

JSON에서 어떤 유형입니까? 노드가 아니라 주어진 링크에 대한 유형이 있습니다! – Sirko

노드 스타일을 정의하기 위해 그 중 하나를 사용하려고합니다. 노드 속성을 가진 새로운 json이 필요하다는 것을 의미합니다 ... 저는 d3에서 새로 왔으며 완전히 잃어 버렸습니다 ... 관심을 가져 주셔서 감사합니다. – Devester

links의 배열이 있습니다. 그 후 이러한 선으로이 배열에서 별개의 노드를 추출 :

links.forEach(function(link) { 
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); 
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); 
    });

을이 시점에서 각 노드에 대한 type를 삽입해야합니다. 그래서 예. 이 노드에 대해 링크 클래스를 사용할 수 있습니다 (이 경우 노드에 대한 모든 링크 중 하나만 해당 클래스를 결정합니다). 즉, 다음과 같은 코드로 이어질하지 않을 것이다 :

links.forEach(function(link) { 
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, type: link.type}); 
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, type: link.type}); 
    });

없음 모든 노드가 type 속성과 다만 name 있습니다.

나중에 여기에 동그라미를 만드는

var circle = svg.append("svg:g").selectAll("circle") 
     .data(force.nodes()) 
    .enter().append("svg:circle") 
     .attr("r", 6) 
     .call(force.drag);

우리는이 같은 각 원 클래스를 결정하는 기능과 함께 해당 유형의 속성을 사용할 수 있습니다 : 함께

var circle = svg.append("svg:g").selectAll("circle") 
     .data(force.nodes()) 
    .enter().append("svg:circle") 
     .attr("r", 6) 
     .attr('class', function(d) { console.log(d); return d.type; }) 
     .call(force.drag);

이제 모든 원을 가지고있는 각 클래스.

각 노드의 유형을 어떻게 든 달라지기를 원한다는 것을 유의하십시오. 위의 선언을 links.forEach(...);에 맞게 변경하십시오.

출처

2012-11-13 13:41:06 Sirko

- 위의 설명 주셔서 감사합니다. 나는 너를 도와 주셔서 당신의 인내심에 감명 받았습니다. 이것은 놀라운 도서관입니다 ... – Devester

d3.js를 사용하여 원 스타일을 변경하는 방법

답변

관련 문제