D3強制佈局：突出顯示節點的顏色（「圓圈」）

當我的數字等於var nodeNumber時，我需要更改節點（「圓圈」）的顏色。但我無法訪問節點並選擇和更改樣式後。D3強制佈局：突出顯示節點的顏色（「圓圈」）

我需要選擇var（nodeNumb）中編號的節點並用另一種顏色高亮顯示。

<!DOCTYPE html> 
    <html> 
     <head> 
     <meta name="keywords" content="Cluster comparison, partition agreement, microbial typing, typing methods" /> 
     <meta name="author" content="Rui Oliveira" /> 
     <!-- <link rel="stylesheet" type="text/css" href="default.css" media="screen" /> --> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
      <title></title> 

     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></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"> 

    h2{ 
    background: #EBF0F3; 
    font: normal 1.2em Tahoma, sans-serif; 
    padding: 10px; 
    margin:0 0 10px 0; 
    color: #114054; 
    } 

    p { 
    text-align:center; 
    padding-top:40px; 
    font: normal 0.9em Tahoma, sans-serif; 
    } 

    path.link { 
     fill: none; 
     stroke: #666; 
     stroke-width: 1.5px; 
    } 

    marker { 
     fill: #302e2f; 
    } 

    marker#strong { 
     fill: black; 
    } 

    path.link.strong { 
     stroke: black; 
     stroke-width: 2px; 
    } 

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

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

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

    text.shadow { 
     stroke: #fff; 
     style="text-align:center; display" 
     stroke-width: 3px; 
     stroke-opacity: .8; 
    } 

    line { 
    stroke-opacity: 10; 
    } 

    path.link:hover.active { 
     fill: none; 
     stroke: red; 
     stroke-width: 5px; 
    } 

    </style> 
    </head> 

    <body style="text-align:center;display"> 

     <!--[if IE]> 
     <p>Warning:</p> 
     <p>Internet Explorer does not allow you to visualize this diagram. Please use a browser that supports svg. We recommend you to use <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="http://www.google.com/chrome/">Google Chrome</a> as alternative.</p> 
    <![endif]--> 

     <script type="text/javascript"> 

    // http://blog.thomsonreuters.com/index.php/mobile-patent-mediums-graphic-of-the-day/ 

    function main() { 
     var pathOfFileToRead = "simulator.json"; 

     var jsonObj = FileHelper.readStringFromFileAtPath 

     (
     pathOfFileToRead 
    ); 

     return jsonObj; 
    } 

    function FileHelper() 
    {} 
    { 
     FileHelper.readStringFromFileAtPath = function(pathOfFileToReadFrom) 
     { 
     var request = new XMLHttpRequest(); 
     request.open("GET", pathOfFileToReadFrom, false); 
     request.send(null); 
     var returnValue = request.responseText; 
     var fileJSON = JSON.parse(returnValue); 

     return fileJSON; 
     } 
    } 

    var jsonFile = main(); 

    JG = jsonFile.generations; 
    for (i = 0, endI = JG.length; i < endI ; i++) { 
     JGIN = JG[i].nodes; 
     for (j = 0, endJ = JGIN.length ; j < endJ ; j++) { 
      JGINJ = JGIN[j]; 
      JGINJAS=JGINJ.after.stid; 
      JGINJBS=JGINJ.before.stid; 
      JGINJNODE=JGINJ.node; 
      for (w = 0, endW = JGINJAS.length; w < endW ; w++) { 
       if(((JGINJBS[w] === "98419") || (JGINJAS[w] === "98419"))){ 
        generationNumber= JG[i].number;; 
        nodeNumb = JGINJ.node; 
       } 

      } 
     } 
    } 


    var links = [<?php 
    $b='karateP500T001.npf'; 
    if(file_exists($b)) 
     $a = fopen($b, "r"); 
    else{ 
     echo "] 
     alert('Invalid file!');</script></body></html>"; 
     exit(0); 
    } 
    $nodes=$links=array(); 

     while (!feof($a)) { 

     $l = urlencode(fgets($a)); 
     $l=explode('%09',$l); 
      if(count($l)==2) 
       $nodes[]=$l; 
      else if(count($l)==3){ 
       $links[]=$l; 
       echo '{source: "',(int) $l['0'],'", target: "',(int) $l['1'],'", type: "medium", value: "',(int) $l['2'],'"},'; 
      } 

     } 

     fclose($a); 

    ?> 

     ]; 



    var nodes = {}; 

    var stF = links.length; 

    function StFinder() { 
     for(i=0; i<stF; i++){ 
     sourceNumber = links[i].source; 
     targetNumber = links[i].target; 

     if((nodeNumb === sourceNumber) || (nodeNumb === targetNumber)) { 
      //INSERIR AQUI A MUDANÇA DE COR 
      document.write("HEELLO"); 

     } 

     } 

    } 

    StFinder(); 

    //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}); 
    }); 

    w = window.innerWidth, //1100 
    h = window.innerHeight; //1690 

    markerWidth = 6, 
    markerHeight = 6, 
    cRadius = 20, // play with the cRadius value 
    refX = cRadius + (markerWidth * 2), 
    refY = -Math.sqrt(cRadius)+5, 
    drSub = cRadius + refY; 

    var force = d3.layout.force() 
    .nodes(d3.values(nodes)) 
    .links(links) 

    //defines where to center the graph 
    .size([w, h]) 
    .linkDistance(100) 
    .charge(-1000) 
    .on("tick", tick) 
    .start(); 

    var svg = d3.select("body").append("svg:svg") 
     // defines the canvas size 
     .attr("width", w) 
     .attr("height", h); 

    //Per-type markers, as they don't inherit styles. 2 
    svg.append("svg:defs").selectAll("marker") 
    .data(["medium", "strong", "weak"]) 
    .enter().append("svg:marker") 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", refX) 
    .attr("refY", refY) 
    .attr("markerWidth", markerWidth) 
    .attr("markerHeight", markerHeight) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5"); 

    // add the links and the arrows 
    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("class", "node") 
     .attr("r", 20) 
    .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", -5) 
    .attr("y", ".31em") 
    .attr("class", "shadow") 
    .text(function(d) { return d.name; }); 

    text.append("svg:text") 
    .attr("x", -5) 
    .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=0; 
       //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> 

    <textarea rows="2" cols="50" style="position:fixed; top:0px;right:0px;" autofocus="true" > 
    <<?php echo $b; ?> 
    </textarea> 

    </body> 

    </html>

來源

2013-11-04 user2920033

我不能完全按照你的小提琴，但希望這樣的事情會爲你工作：

var element = d3.select('#idForElement'); 
element.style('fill', 'blue')

或類似的

someElement.append('circle') 
      .style('fill', 'red');

來源

2013-11-04 17:14:52 Vidya

這我明白，所以一個疑問，我怎麼可以選擇具有一定數量的節點嗎？換句話說，我的nodeNUMBER是21，所以我需要用這個數字選擇節點，我的疑問是這個過程。如果你想讓我知道我可以做到這一點，你可以對我進行剋制。 – user2920033

如果節點被標識爲一個ID號，那麼你可以做'd3.select（'＃21'）'。 – Vidya

代碼不運行，因爲json文件，但所有的代碼都在那裏。 – user2920033

D3強制佈局：突出顯示節點的顏色（「圓圈」）

回答

相關問題