Javascript 在HTML树图中创建超链接_Javascript_Html_Hyperlink

Javascript 在HTML树图中创建超链接

javascript html hyperlink

Javascript 在HTML树图中创建超链接,javascript,html,hyperlink,Javascript,Html,Hyperlink,我希望用html创建一个交互式树形图。下面是我的代码，非常有效。我希望对其进行改进，使最后一个节点或这些节点的标签成为超链接：儿童1=> 儿童2=> 等等我理解，首先必须在节点定义中定义“url”： {“名称”：“节点1”，“url”：“http:/”http://www.url1.org}, 但是如何修改代码的最后一部分以产生预期的效果呢谢谢你的帮助或建议 .节点圆{ 填充：#fff；笔画：钢蓝；笔画宽度：3px； } .节点文本{ 字体：14px无衬线； } .链接{ 填充

我希望用html创建一个交互式树形图。下面是我的代码，非常有效。我希望对其进行改进，使最后一个节点或这些节点的标签成为超链接：儿童1=> 儿童2=> 等等

我理解，首先必须在节点定义中定义“url”：

{“名称”：“节点1”，“url”：“http:/”http://www.url1.org},

但是如何修改代码的最后一部分以产生预期的效果呢

谢谢你的帮助或建议


.节点圆{
填充：#fff；
笔画：钢蓝；
笔画宽度：3px；
}
.节点文本{
字体：14px无衬线；
}
.链接{
填充：无；
冲程：#ccc；
笔画宽度：2px；
}
树形变种=
{
“名称”：“根”，
“儿童”：[
{ 
“名称”：“节点A”，
“儿童”：[
{“名称”：“节点1”}，
{“名称”：“节点2”}
]
},
{ 
“名称”：“节点B”，
“儿童”：[
{“名称”：“节点3”}，
{“名称”：“节点4”}
]
},
]
};
//设置图表的尺寸和边距
var margin={顶部：20，右侧：90，底部：30，左侧：90}，
宽度=1000-margin.left-margin.right，
高度=1000-margin.top-margin.bottom；
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“转换”
+margin.left+”，“+margin.top+”）；
var i=0，
持续时间=750，
根；
//声明树布局并指定大小
var treemap=d3.tree（）.size（[height，width]）；
//指定父对象、子对象、高度和深度
root=d3.hierarchy（treeData，函数（d）{返回d.children；}）；
root.x0=高度/2；
root.y0=0；
//在第二层之后崩溃
根。子。forEach（塌陷）；
更新（根）；
//折叠节点及其所有子节点
功能崩溃（d）{
如果（d.儿童）{
d、 _children=d.children
d、 _儿童。forEach（崩溃）
d、 children=null
}
}
函数更新（源）{
//为节点指定x和y位置
var treeData=树映射（根）；
//计算新的树布局。
var nodes=treeData.subjects（），
links=treeData.subjects（）.slice（1）；
//为固定深度进行规格化。
forEach（函数（d）{d.y=d.depth*180}）；
//*******************节点部分***************************
//更新节点。。。
var node=svg.selectAll（'g.node'）
.data（节点，函数（d）{返回d.id | |（d.id=++i）}）；
//在父对象的上一个位置输入任何新模式。
var nodeEnter=node.enter（）.append（'g'）
.attr（'类'，'节点'）
.attr（“转换”，函数（d）{
返回“translate”（“+source.y0+”，“+source.x0+”）；
})
.on（'点击'，点击）；
//为节点添加圆
nodeEnter.append（'circle'））
.attr（'类'，'节点'）
.attr（'r'，1e-6）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
});
//为节点添加标签
nodeEnter.append（'text'）
.attr（“dy”，“.35em”）
.attr（“x”，函数（d）{
返回d.children | | d.| U儿童？-13:13；
})
.attr（“文本锚定”，函数（d）{
返回d.children | d.| u children？“结束”：“开始”；
})
.text（函数（d）{返回d.data.name；}）；
//更新
var nodeUpdate=nodenter.merge（节点）；
//转换到节点的正确位置
nodeUpdate.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+d.y+”，“+d.x+”）；
});
//更新节点属性和样式
nodeUpdate.select（'circle.node'）
.attr（'r'，10）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
})
.attr（“光标”、“指针”）；
//删除任何现有节点
var nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+source.y+”，“+source.x+”）；
})
.remove（）；
//退出时，将节点圆的大小减小为0
nodeExit.select（'circle'）
.attr（'r'，1e-6）；
//退出时减少文本标签的不透明度
nodeExit.select（'text'）
.样式（“填充不透明度”，1e-6）；
//*******************链接部分***************************
//更新链接。。。
var link=svg.selectAll（'path.link'）
.数据（链接，函数（d）{返回d.id；}）；
//在父对象的上一个位置输入任何新链接。
var linkEnter=link.enter（）.insert（'path'，'g'）
.attr（“类”、“链接”）
.attr（'d'，函数（d）{
var o={x:source.x0，y:source.y0}
返回对角线（o，o）
});
//更新
var linkUpdate=linkEnter.merge（link）；
//转换回父元素位置
linkUpdate.transition（）
.持续时间（持续时间）
.attr（'d'，函数（d）{返回对角线（d，d.parent）}）；
//删除任何现有链接
var linkExit=link.exit（）.transition（）
.持续时间（持续时间）
.attr（'d'，函数（d）{
var o={x:source.x，y:source.y}
返回对角线（o，o）
})
.remove（）；
//存储旧位置以进行转换。
nodes.forEach（函数（d）{
d、 x0=d.x；
d、 y0=d.y；
});
//创建从父节点到子节点的弯曲（对角）路径
函数对角线（s，d）{
path=`M${s.y}${s.x}
C${（s.y+d.y）/2}${s.x}，
${（s.y+d.y）/2}${d.x}，
${d.y}${d.x}`
返回路径
}
//在单击时切换子项。
功能点击（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则{
d、 儿童=d.\U儿童；
d、 _children=null；
}
更新（d）；
}
}

<!DOCTYPE html>
<meta charset="UTF-8">
<style>

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

.node text {
  font: 14px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

</style>

<body>

<!-- load the d3.js library --> 
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var treeData =
  {
    "name": "Root",
    "children": [
      { 
        "name": "Node A",
        "children": [
          {"name": "Node 1"},
          {"name": "Node 2"}
        ]
      },
      { 
        "name": "Node B",
        "children": [
          {"name": "Node 3"},
          {"name": "Node 4"}
        ]
      },
    ]
  };

// Set the dimensions and margins of the diagram
var margin = {top: 20, right: 90, bottom: 30, left: 90},
    width = 1000 - margin.left - margin.right,
    height = 1000 - margin.top - margin.bottom;

// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate("
          + margin.left + "," + margin.top + ")");

var i = 0,
    duration = 750,
    root;

// declares a tree layout and assigns the size
var treemap = d3.tree().size([height, width]);

// Assigns parent, children, height, depth
root = d3.hierarchy(treeData, function(d) { return d.children; });
root.x0 = height / 2;
root.y0 = 0;

// Collapse after the second level
root.children.forEach(collapse);

update(root);

// Collapse the node and all it's children
function collapse(d) {
  if(d.children) {
    d._children = d.children
    d._children.forEach(collapse)
    d.children = null
  }
}

function update(source) {

  // Assigns the x and y position for the nodes
  var treeData = treemap(root);

  // Compute the new tree layout.
  var nodes = treeData.descendants(),
      links = treeData.descendants().slice(1);

  // Normalize for fixed-depth.
  nodes.forEach(function(d){ d.y = d.depth * 180});

  // ****************** Nodes section ***************************

  // Update the nodes...
  var node = svg.selectAll('g.node')
      .data(nodes, function(d) {return d.id || (d.id = ++i); });

  // Enter any new modes at the parent's previous position.
  var nodeEnter = node.enter().append('g')
      .attr('class', 'node')
      .attr("transform", function(d) {
        return "translate(" + source.y0 + "," + source.x0 + ")";
    })
    .on('click', click);

  // Add Circle for the nodes
  nodeEnter.append('circle')
      .attr('class', 'node')
      .attr('r', 1e-6)
      .style("fill", function(d) {
          return d._children ? "lightsteelblue" : "#fff";
      });

  // Add labels for the nodes
  nodeEnter.append('text')
      .attr("dy", ".35em")
      .attr("x", function(d) {
          return d.children || d._children ? -13 : 13;
      })
      .attr("text-anchor", function(d) {
          return d.children || d._children ? "end" : "start";
      })
      .text(function(d) { return d.data.name; });

  // UPDATE
  var nodeUpdate = nodeEnter.merge(node);

  // Transition to the proper position for the node
  nodeUpdate.transition()
    .duration(duration)
    .attr("transform", function(d) { 
        return "translate(" + d.y + "," + d.x + ")";
     });

  // Update the node attributes and style
  nodeUpdate.select('circle.node')
    .attr('r', 10)
    .style("fill", function(d) {
        return d._children ? "lightsteelblue" : "#fff";
    })
    .attr('cursor', 'pointer');


  // Remove any exiting nodes
  var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) {
          return "translate(" + source.y + "," + source.x + ")";
      })
      .remove();

  // On exit reduce the node circles size to 0
  nodeExit.select('circle')
    .attr('r', 1e-6);

  // On exit reduce the opacity of text labels
  nodeExit.select('text')
    .style('fill-opacity', 1e-6);

  // ****************** links section ***************************

  // Update the links...
  var link = svg.selectAll('path.link')
      .data(links, function(d) { return d.id; });

  // Enter any new links at the parent's previous position.
  var linkEnter = link.enter().insert('path', "g")
      .attr("class", "link")
      .attr('d', function(d){
        var o = {x: source.x0, y: source.y0}
        return diagonal(o, o)
      });

  // UPDATE
  var linkUpdate = linkEnter.merge(link);

  // Transition back to the parent element position
  linkUpdate.transition()
      .duration(duration)
      .attr('d', function(d){ return diagonal(d, d.parent) });

  // Remove any exiting links
  var linkExit = link.exit().transition()
      .duration(duration)
      .attr('d', function(d) {
        var o = {x: source.x, y: source.y}
        return diagonal(o, o)
      })
      .remove();

  // Store the old positions for transition.
  nodes.forEach(function(d){
    d.x0 = d.x;
    d.y0 = d.y;
  });

  // Creates a curved (diagonal) path from parent to the child nodes
  function diagonal(s, d) {

    path = `M ${s.y} ${s.x}
            C ${(s.y + d.y) / 2} ${s.x},
              ${(s.y + d.y) / 2} ${d.x},
              ${d.y} ${d.x}`

    return path
  }

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

</script>
</body>