Fatal编程技术网
  • d3.js/
  • D3.js 如何在鼠标悬停事件中更改链接颜色

D3.js 如何在鼠标悬停事件中更改链接颜色

d3.js

D3.js 如何在鼠标悬停事件中更改链接颜色,d3.js,force-layout,D3.js,Force Layout,当我将鼠标移到节点上时，链接的颜色应该会改变。如果我将鼠标移到父节点上，则所有子节点链接都应更改链接颜色，当我将鼠标移到子节点上时，则所有子节点都将更改链接颜色，请帮助我。我有以下代码。我应该在哪里更改代码？ 我该怎么办？或者有其他的替代品吗 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <s

当我将鼠标移到节点上时，链接的颜色应该会改变。如果我将鼠标移到父节点上，则所有子节点链接都应更改链接颜色，当我将鼠标移到子节点上时，则所有子节点都将更改链接颜色，请帮助我。我有以下代码。我应该在哪里更改代码？ 我该怎么办？或者有其他的替代品吗

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


.节点圆{
光标：指针；
行程：#3182bd；
笔划宽度：.5px；
}
line.link{
填充：无；
行程：#9ecae1；
笔划宽度：1.5px；
}
var w=960，
h=500，
根
var-force=d3.layout.force（）
.linkDistance（200）
。收费（-500）
//.重力（-0.1）
.尺寸（[w，h]）；
var vis=d3.选择（“图表”）.追加（“svg:svg”）
.attr（“宽度”，w*2）
.attr（“高度”，h*2）；
d3.json（“try.json”，函数（json）{
root=json；
函数toggleAll（d）{
如果（d.children）d.children.forEach（toggleAll）；单击（d）；
}
根。子。forEach（toggleAll）；
更新（）；
});
函数更新（）{
变量节点=展平（根），
links=d3.layout.tree（）.links（节点）；
root.fixed=true；
根x=w/2；
根y=h/2+100；
//重新启动强制布局。
武力
.节点（节点）
.链接（links）
.start（）；
//更新链接…
var link=vis.selectAll（“line.link”）
.data（链接，函数（d）{返回d.target.id；}）；
//输入任何新链接。
link.enter（）.insert（“svg:line”，“.node”）
.attr（“类”、“链接”）
.attr（“x1”，函数（d）{返回d.source.x+100；}）
.attr（“y1”，函数（d）{返回d.source.y+100；}）
.attr（“x2”，函数（d）{返回d.target.x+100；}）
.attr（“y2”，函数（d）{返回d.target.y+100；}）；
//退出所有旧链接。
link.exit（）.remove（）；
//更新节点…
var node=vis.selectAll（“g.node”）
.data（节点，函数（d）{return d.id；}）
节点。选择（“圆”）
.样式（“填充”，颜色）；
//输入任何新节点。
var nodeEnter=node.enter（）.append（“svg:g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return“translate”（“+d.x+100+”，“+d.y+100+”）”）；}）
。开启（“点击”，点击）；
追加（“svg:circle”）
.attr（“r”，函数（d）{返回d.comp？70:35；}）
.样式（“填充”，颜色）；
追加（“svg:text”）
.attr（“文本锚定”、“中间”）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.comp？d.comp:d.class？d.class:d.patent；}）；
//退出所有旧节点。
node.exit（）.remove（）；
force.on（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
});
}
//叶节点颜色为橙色，包装为白色或蓝色。
功能色（d）{
返回d.comp？#3182bd:d.#u children？#c6dbef:d.children？#3182bd:#fd8d3c；
}
//在单击时切换子项。
功能点击（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则{
d、 儿童=d.\U儿童；
d、 _children=null；
}
更新（）；
}
//返回根目录下所有节点的列表。
函数展平（根）{
var节点=[]，i=0；
函数递归（节点）{
if（node.children）node.children.forEach（recurse）；
如果（！node.id）node.id=++i；
nodes.push（节点）；
}
递归（根）；
返回节点；
}
如果你把它放在css样式中，当鼠标悬停在上面时，它应该会变为线链接的红色

line.link:hover {stroke: red;stroke-width: 2px}
希望这有帮助。

如果你把它放在你的css样式中，当鼠标悬停在上面时，它应该会变成红色的线条链接

line.link:hover {stroke: red;stroke-width: 2px}
希望这有帮助。

要在鼠标悬停时更改链接的颜色，可以使用CSS样式。请参阅此处，如果您使用Chrome右键单击页面上的任何位置并选择“Inspect Element”，或者如果您使用firefox使用Firebug并查看控制台选项卡上是否存在任何错误？@persian Dev抱歉，问错了问题..如果要在鼠标悬停时更改链接的颜色，可以使用CSS样式。请看这里，如果您使用Chrome，请右键单击页面上的任何位置并选择“Inspect Element”，或者如果您使用firefox，请使用Firebug，并查看控制台选项卡上是否存在任何错误？@persian Dev抱歉，问错了问题。。