2

その番号が var nodeNumber と等しい場合、ノード (「円」) の色を変更する必要があります。しかし、ノードにアクセスして選択し、スタイルを変更することはできません。

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>
4

1 に答える 1

0

私はあなたのフィドルを完全にフォローできませんでしたが、うまくいけば、次のようなものがうまくいくでしょう:

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

または同様に

someElement.append('circle')
           .style('fill', 'red');
于 2013-11-04T17:14:52.893 に答える