如何使用d3.js

我試圖改變這個例子http://bl.ocks.org/1153292改圈樣式力指向內置d3.js.如何使用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

回答

相關問題