如何在SVG中D3

選擇一個元素我在D3形成狀結構的網絡的應用程序，它具有幾個節點這就是被連接到每個other.Now我想選擇該網絡的一部分，並且也希望所選portion.here我張貼我的屏幕的值拍攝 this is the network i created using D3 如何在SVG中D3

i want this type of selection

現在我想選擇富士康和亞馬遜節點，也希望自己的價值觀..

這裏是我在D3代碼..

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
.link { 
fill: none; 
stroke: #666; 
stroke-width: 1.5px; 
} 

#licensing { 
fill: green; 
} 

.link.licensing { 
stroke: green; 
} 

.link.resolved { 
stroke-dasharray: 0, 2 1; 
} 

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

text { 
font: 10px sans-serif; 
pointer-events: none; 
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; 
} 
</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<link rel="stylesheet" href="app.css"> 
<script> 
    // http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/ 

    /*Here licensing type is making the green arrow 
    *Here resolved type is making the solid arrow 
    *Here suit type is making the dotted arrow 
    * 
    * 
    **/ 

    var links = [ { 
     source : "Microsoft", 
     target : "Amazon", 
     type : "licensing" 
    }, { 
     source : "Microsoft", 
     target : "HTC", 
     type : "licensing" 
    }, { 
     source : "Samsung", 
     target : "Apple", 
     type : "suit" 
    }, { 
     source : "Motorola", 
     target : "Apple", 
     type : "suit" 
    }, { 
     source : "Nokia", 
     target : "Apple", 
     type : "resolved" 
    }, { 
     source : "HTC", 
     target : "Apple", 
     type : "suit" 
    }, { 
     source : "Kodak", 
     target : "Apple", 
     type : "suit" 
    }, { 
     source : "Kodak", 
     target : "Qualcomm", 
     type : "licensing" 
    } ]; 

    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 width = 960, height = 500; 

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

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

    var gStates = svg.selectAll("g.state").data(links); 

    var drag = d3.behavior.drag().on("drag", function(d, i) { 
     var selection = d3.selectAll('.selected'); 

     if (selection[0].indexOf(this) == -1) { 
      selection.classed("selected", false); 
      selection = d3.select(this); 
      selection.classed("selected", true); 
     } 

     selection.attr("transform", function(d, i) { 
      d.x += d3.event.dx; 
      d.y += d3.event.dy; 
      return "translate(" + [ d.x, d.y ] + ")" 
     }) 
     // reappend dragged element as last 
     // so that its stays on top 
     this.parentNode.appendChild(this); 
     d3.event.sourceEvent.stopPropagation(); 
    }); 


    // Per-type markers, as they don't inherit styles. 
    svg.append("defs").selectAll("marker").data(
      [ "suit", "licensing", "resolved" ]).enter().append("marker") 
      .attr("id", function(d) { 
       return d; 
      }).attr("viewBox", "0 -5 10 10").attr("refX", 15).attr("refY", 
        -1.5).attr("markerWidth", 6).attr("markerHeight", 6) 
      .attr("orient", "auto").append("path").attr("d", 
        "M0,-5L10,0L0,5"); 

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

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

    var text = svg.append("g").selectAll("text").data(force.nodes()) 
      .enter().append("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", linkArc); 
     circle.attr("transform", transform); 
     text.attr("transform", transform); 
    } 

    function linkArc(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; 
    } 

    function transform(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    } 
</script>

來源

2013-11-24 lucifer

@Lars Kotthoff感謝您，我能夠獲得控制檯中的所有元素，但現在我需要，我會選擇多個節點，這些節點會去console.can你幫普萊舍？這是唯一的問題，我已與stucked ..請請幫助... – lucifer

您可以過濾選擇與.filter()。在你的情況下，這看起來像這樣。

var selected = circle.filter(function(d) { 
     return d.name == "Amazon" || d.name == "Foxconn"; 
});

現在，您可以對選擇，其中this將是circle元素進行操作和數據是按照通常的方式進行訪問。

selected.each(function(d) { 
    // d contains the data for the node and this is the circle element 
});

來源

2013-11-24 09:54:05

我已經編輯了你的代碼，但問題是我想選擇多個節點，它可能是任何節點，我想一起選擇它們。 – lucifer

是的，這就是'.filter（）'的用途。您可以指定定義選擇的任意代碼。 –

當您使用輸入（）追加節點，我想你應該添加一些屬性標記

節點，如ID

<!doctype html> 
<html lang="zh"> 
<head> 
    <meta charset="utf-8"> 
    <title>Template Index</title> 
</head> 
<body> 

    <ul id="comp"> 
    </ul> 

    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script> 
    var company = [ 
    { id: "IBM", value: "222"}, 
    { id: "MS", value: "222"}, 
    { id: "Google", value: "222"} 
    ]; 
    var comp = d3.select("#comp").selectAll(".com") 
    .data(company) 
    .enter() 
    .append("li") 
    .attr("id", function (d) { return "id" + d.id; }) 
    .text(function (d) { return d.id; }); 

    var ibm = d3.select("#idIBM").datum(); 
    console.log(ibm); // Object { id="IBM", value="222"} 
    </script> 
</body> 
</html>

那麼你就可以得到選擇投D3

然後得到綁定在datum（）中的對象數據（）

更新：我更新文件並在firefox chrome和ie10中測試它運行良好

來源

2013-11-24 02:39:18

沒有什麼是來我的屏幕..沒有你寫完整的代碼？ – lucifer

我在我的本地文件中引用d3 .. –

是啊我做到了，但沒有任何東西來到我的屏幕 – lucifer

回答

相關問題