D3.js D3强制布局：突出显示节点的颜色（“圆”）_D3.js_Highlight_Force Layout

D3.js D3强制布局：突出显示节点的颜色（“圆”）

d3.js

D3.js D3强制布局：突出显示节点的颜色（“圆”）,d3.js,highlight,force-layout,D3.js,Highlight,Force Layout,当节点的编号等于var nodeNumber时，我需要更改节点（“圆”）的颜色。但我无法访问节点并选择和更改样式后我需要选择变量（nodeNumb）中带有数字的节点，并用另一种颜色高亮显示 <!DOCTYPE html> <html> <head> <meta name="keywords" content="Cluster comparison, partition agreement, microbial

当节点的编号等于var nodeNumber时，我需要更改节点（“圆”）的颜色。但我无法访问节点并选择和更改样式后

我需要选择变量（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>


氢{
背景：#EBF0F3；
字体：正常1.2米大马，无衬线；
填充：10px；
裕度：0 10px 0；
颜色：#114054；
}
p{
文本对齐：居中；
填充顶部：40px；
字体：普通0.9em塔荷马，无衬线；
}
路径链接{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
标记{
填充：#302e2f；
}
标记#强{
填充：黑色；
}
path.link.strong{
笔画：黑色；
笔画宽度：2px；
}
路径链接弱{
笔划数组：0,2 1；
}
圈{
填充：#ccc；
冲程：#333；
笔划宽度：1.5px；
}
正文{
字体：14px无衬线；
指针事件：无；
}
text.shadow{
冲程：#fff；
style=“文本对齐：居中；显示”
笔画宽度：3px；
笔画不透明度：.8；
}
线{
笔画不透明度：10；
}
path.link:hover.active{
填充：无；
笔画：红色；
笔画宽度：5px；
}
// http://blog.thomsonreuters.com/index.php/mobile-patent-mediums-graphic-of-the-day/
函数main（）{
var pathoffieltoread=“simulator.json”；
var jsonObj=FileHelper.readStringFromFileAtPath
(
病理学
);
返回jsonObj；
}
函数FileHelper（）
{}
{
FileHelper.readStringFromFileAtPath=函数（pathOfFileToReadFrom）
{
var request=new XMLHttpRequest（）；
打开（“获取”，pathoffieltoreadfrom，false）；
请求发送（空）；
var returnValue=request.responseText；
var fileJSON=JSON.parse（returnValue）；
返回fileJSON；
}
}
var jsonFile=main（）；
JG=jsonFile.generations；
对于（i=0，endI=JG.length；ivar links=[我不能完全理解你的想法，但希望类似的东西能对你有用：
var element = d3.select('#idForElement');
element.style('fill', 'blue')

或者类似地
someElement.append('circle')
           .style('fill', 'red');

我明白这一点，所以有人怀疑我如何选择具有特定编号的节点？换句话说，我的节点编号是21，所以我需要选择具有此编号的节点，我的怀疑是这个过程。如果您想告诉我可以在哪里执行此操作的cpde，您可以向我说明。如果该节点以编号标识为id，则您可以执行d3。选择（“#21”）
。代码不会运行，因为json文件，但所有代码都在那里。谢谢，我会试试这个。