2

ノードの上にマウスを移動すると、リンクの色が変わるはずです。親ノードの上にマウスを移動すると、すべての子ノード リンクのリンクの色が変わります。子ノードの上にマウスを移動すると、すべての子の色が変わります。助けてください。次のコードがあります。コードをどこで変更する必要がありますか? どうすればいいですか？または、それに対する代替ネイティブはありますか？

<!DOCTYPE html>
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">

.node circle {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: .5px;
}


line.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script src="../d3/d3.v3.min.js"></script>
    <script type="text/javascript">

var w = 960,
    h = 500,
    root;

var force = d3.layout.force()
    .linkDistance(200)
    .charge(-500)
    //.gravity(-0.1)
    .size([w, h]);

var vis = d3.select("#chart").append("svg:svg")
    .attr("width", w*2)
    .attr("height", h*2);

d3.json("try.json", function(json) {
  root = json;
  function toggleAll(d) {
                          if (d.children) d.children.forEach(toggleAll);click(d);
                        }
  root.children.forEach(toggleAll);
  update();
});

function update() {
  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);


root.fixed=true;
  root.x=w/2;
  root.y=h/2+100;
  // Restart the force layout.
  force
      .nodes(nodes)
      .links(links)
      .start();

  // Update the links…
  var link = vis.selectAll("line.link")
      .data(links, function(d) { return d.target.id; });

  // Enter any new links.
  link.enter().insert("svg:line", ".node")
      .attr("class", "link")
      .attr("x1", function(d) { return d.source.x+100; })
      .attr("y1", function(d) { return d.source.y+100; })
      .attr("x2", function(d) { return d.target.x+100; })
      .attr("y2", function(d) { return d.target.y+100; });
  // Exit any old links.
  link.exit().remove();

  // Update the nodes…
  var node = vis.selectAll("g.node")
      .data(nodes, function(d) { return d.id; })

  node.select("circle")
  .style("fill", color);

  // Enter any new nodes.
  var nodeEnter = node.enter().append("svg:g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x+100 + "," + d.y+100 +     ")"; })
      .on("click", click);

  nodeEnter.append("svg:circle")
      .attr("r", function(d) { return d.comp ? 70 : 35; })
      .style("fill", color);

  nodeEnter.append("svg:text")
      .attr("text-anchor", "middle")
      .attr("dy", ".35em")
        .text(function(d) { return d.comp ? d.comp : d.class? d.class : d.patent; });

  // Exit any old nodes.
  node.exit().remove();

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";     });    
  });
}

// Color leaf nodes orange, and packages white or blue.
function color(d) {
  return d.comp ? "#3182bd": d._children ? "#c6dbef" : d.children ? "#3182bd" :     "#fd8d3c";
}

// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update();
}

// Returns a list of all nodes under the root.
function flatten(root) {
  var nodes = [], i = 0;

  function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    nodes.push(node);
  }

  recurse(root);
  return nodes;
    }

        </script>
      </body>
    </html>
4

1 に答える 1

4

これをCSSスタイルに配置すると、マウスが上に置かれたときに行リンクの色が赤に変わるはずです。

line.link:hover {stroke: red;stroke-width: 2px}

お役に立てれば。

于 2013-08-05T11:15:49.553 に答える