如何在标签上添加带有标签的圆以指示信息到矩形节点，以及如何在下载前删除圆

分类：编程问答

如何解决如何在标签上添加带有标签的圆以指示信息到矩形节点，以及如何在下载前删除圆

我有一棵垂直的D3JS树，其中的节点是矩形。我想在矩形节点的右上角附加一个带有斜体字母“ i ”的圆，以表明该节点还有其他信息。我设法仅将斜体字母“ i”附加到了后面，但是我无法将其圈成一个圆圈，并且仍然使节点可单击。另外，我使用克隆将树作为SVG文件下载，并希望在下载和打印之前从克隆的组元素中删除此附加的圆和字母“ i ”。

        <div class="header" [ngStyle]="{background: 'url('+userProfile.headerImagePath+')'}">
        ...

var treeData = [{
  "name": "Top Level","parent": "null","remark": "yes","children": [{
      "name": "Level 2: A","parent": "Top Level","children": [{
          "name": "Son of A","parent": "Level 2: A","remark": "null"
        },{
          "name": "Daughter of A","remark": "null"
        }
      ]
    },{
      "name": "Level 2: B","remark": "null"
    }
  ]
}];

//*************************************************************************************
// 1. Create the button
var button = document.createElement("button");
button.innerHTML = "download file";
//*************************************************************************************

// ************** Generate the tree diagram  *****************
var margin = {
    top: 20,right: 120,bottom: 20,left: 120
  },width = 960 - margin.right - margin.left,height = 500 - margin.top - margin.bottom;

var i = 0,rectW = 100,rectH = 30,duration = 750,root;

var tree = d3.layout.tree()
  .size([height,width]);

//swap x and y for vertical
var diagonal = d3.svg.diagonal()
  .projection(function(d) {
    return [d.x + rectW / 2,d.y + rectH / 2];
    //  .projection(function(d) { return [d.x,d.y]; });
  });

//var gElement = document.createElement('svg:g');
var gElement = document.createElementNS(d3.ns.prefix.svg,'g');
gElement.setAttribute("id","fg");
console.log(gElement);

var svg = d3.select("body").append("svg")
  .attr("width",width + margin.right + margin.left)
  .attr("height",height + margin.top + margin.bottom)
  .append(function() {
    return gElement;
  }) //The argument to .append() has to be a function,you can't just pass element to it.
  //    .append("svg:g")
  .attr("transform","translate(" + margin.left + "," + margin.top + ")");

root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;

update(root);

d3.select(self.frameElement).style("height","500px");


function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),links = tree.links(nodes);

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

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

  // Enter any new nodes at the parent's prevIoUs position.
  //swap x and y for vertical
  var nodeEnter = node.enter().append("g")
    .attr("class","node")
    .attr("transform",function(d) {
      return "translate(" + source.x0 + "," + source.y0 + ")";
    })
    .on("click",click);

  nodeEnter.append("rect")
    //nodeEnter.append("circle")
    //  .attr("r",1e-6)
    .attr("width",rectW)
    .attr("height",rectH)
    .style("fill",function(d) {
      return d._children ? "lightsteelblue" : "#fff";
    });

  nodeEnter.append("text")
    .attr("x",function(d) {
      return d.children || d._children ? -13 : 13;
    })
    .attr("dy",".35em")
    .attr("text-anchor",function(d) {
      return d.children || d._children ? "end" : "start";
    })
    .text(function(d) {
      return d.name;
    })
    .style("fill-opacity",1e-6);


  // IAH 20/01/2019 Filter to put tooltip only on nodes that have information associated with it
  nodeEnter.filter(function(d) {
      return (d.remark != 'null')
    })
    .append("text")
    .attr("id","infoText")
    .attr("x",96)
    .attr("y",7)
    .attr("dy",".30em")
    .style("font-style","italic")
    .style("font-family","serif")
    .style("font-weight","bold")
    .text("i");

  // Transition nodes to their new position.
  //swap x and y for vertical layout
  var nodeUpdate = node.transition()
    .duration(duration)
    .attr("transform",function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });

  //nodeUpdate.select("circle")
  nodeUpdate.select("rect")
    .attr("width",rectH)
    .style("stroke","black")
    //  .attr("r",10)
    .style("fill",function(d) {
      return d._children ? "lightsteelblue" : "#fff";
    });

  nodeUpdate.select("text")
    .attr("x",rectW / 2)
    .attr("y",rectH / 2)
    .attr("dy","middle")
    .style("fill-opacity",1);

  // Transition exiting nodes to the parent's new position.
  //vertical switch x and y positions
  var nodeExit = node.exit().transition()
    .duration(duration)
    .attr("transform",function(d) {
      return "translate(" + source.x + "," + source.y + ")";
    })
    .remove();

  //nodeExit.select("circle")
  nodeExit.select("rect")
    .attr("r",1e-6);

  nodeExit.select("text")
    .style("fill-opacity",1e-6);

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

  // Enter any new links at the parent's prevIoUs position.
  link.enter().insert("path","g")
    .attr("class","link")
    .attr("stroke","#ccc")
    .attr("fill","none")
    .attr("stroke-width","2px")
    .attr("d",function(d) {
      var o = {
        x: source.x0,y: source.y0
      };
      return diagonal({
        source: o,target: o
      });
    });

  // Transition links to their new position.
  link.transition()
    .duration(duration)
    .attr("d",diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
    .duration(duration)
    .attr("d",function(d) {
      var o = {
        x: source.x,y: source.y
      };
      return diagonal({
        source: o,target: o
      });
    })
    .remove();

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

}

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

//*************************************************************************************
// 2. Append button somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button)
  .setAttribute("transform","translate(" + 0 + "," + 0 + ")");

//*************************************************************************************

function svgDataURL(svg) {
  var svgAsXML = (new XMLSerializer).serializetoString(svg);
  var dataURL = "data:image/svg+xml," + encodeURIComponent(svgAsXML);
  return dataURL;
}

button.onclick = function() {
  var svgElement = document.querySelector('svg');
  var svgWH = svgElement.getBBox();

  var canvasWidth = svgWH.width;
  var canvasHeight = svgWH.height;

  var groupElement = document.getElementById('fg');
  groupElement.setAttribute("transform","translate(0,0)");

  const bb = groupElement.getBBox();

  // clone the svg to avoid destroying it while appending to the svg namespace
  let clonedGroupElement = groupElement.cloneNode(true);

  var svgContent = document.createElementNS('http://www.w3.org/2000/svg','svg');

  svgContent.setAttribute('viewBox',' ' + bb.x + ' ' + bb.y + '  ' + bb.width + ' ' + bb.height);

  svgContent.setAttribute("width","100%");
  svgContent.setAttribute("height","100%");
  svgContent.setAttribute("preserveAspectRatio","xMidYMid meet");

  // try to remove the information icon before downloading
  var rmText = document.getElementById('infoText');
  console.log(rmText);

  svgContent.appendChild(clonedGroupElement); // use the cloned nodes

  var dl = document.createElement('a');
  document.body.appendChild(dl);
  dl.setAttribute("href",svgDataURL(svgContent)); // function svgDataURL expects a node
  dl.setAttribute("download","test.svg");
  dl.click();
  dl.remove();

  svgContent.removeChild(clonedGroupElement);
};
.node {
  cursor: pointer;
}

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

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

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

解决方法

我创建了一个虚拟属性ignore-export，并且能够使用querySelectorAll()选择具有该属性的所有元素并将其删除。请注意，node.remove()函数在IE中不受支持，但MDN上有一个polyfill。

我画圆时节点没有响应没有任何问题，但是如果您遇到了，请告诉我。

var treeData = [{
  "name": "Top Level","parent": "null","remark": "yes","children": [{
      "name": "Level 2: A","parent": "Top Level","children": [{
          "name": "Son of A","parent": "Level 2: A","remark": "null"
        },{
          "name": "Daughter of A","remark": "null"
        }
      ]
    },{
      "name": "Level 2: B","remark": "null"
    }
  ]
}];

//*************************************************************************************
// 1. Create the button
var button = document.createElement("button");
button.innerHTML = "download file";
//*************************************************************************************

// ************** Generate the tree diagram  *****************
var margin = {
    top: 20,right: 120,bottom: 20,left: 120
  },width = 960 - margin.right - margin.left,height = 500 - margin.top - margin.bottom;

var i = 0,rectW = 100,rectH = 30,duration = 750,root;

var tree = d3.layout.tree()
  .size([height,width]);

//swap x and y for vertical
var diagonal = d3.svg.diagonal()
  .projection(function(d) {
    return [d.x + rectW / 2,d.y + rectH / 2];
    //  .projection(function(d) { return [d.x,d.y]; });
  });

//var gElement = document.createElement('svg:g');
var gElement = document.createElementNS(d3.ns.prefix.svg,'g');
gElement.setAttribute("id","fg");
console.log(gElement);

var svg = d3.select("body").append("svg")
  .attr("width",width + margin.right + margin.left)
  .attr("height",height + margin.top + margin.bottom)
  .append(function() {
    return gElement;
  }) //The argument to .append() has to be a function,you can't just pass element to it.
  //    .append("svg:g")
  .attr("transform","translate(" + margin.left + "," + margin.top + ")");

root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;

update(root);

d3.select(self.frameElement).style("height","500px");


function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),links = tree.links(nodes);

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

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

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

  nodeEnter.append("rect")
    //nodeEnter.append("circle")
    //  .attr("r",1e-6)
    .attr("width",rectW)
    .attr("height",rectH)
    .style("fill",function(d) {
      return d._children ? "lightsteelblue" : "#fff";
    });

  nodeEnter.append("text")
    .attr("x",function(d) {
      return d.children || d._children ? -13 : 13;
    })
    .attr("dy",".35em")
    .attr("text-anchor",function(d) {
      return d.children || d._children ? "end" : "start";
    })
    .text(function(d) {
      return d.name;
    })
    .style("fill-opacity",1e-6);


  // IAH 20/01/2019 Filter to put tooltip only on nodes that have information associated with it
  var nodesWithInfo = nodeEnter.filter(function(d) {
    return (d.remark != 'null')
  });
  
  nodesWithInfo
    .append("circle")
    .attr("export-ignore",true)
    .attr("cx",96)
    .attr("cy",7)
    .attr("r",10);
  
  nodesWithInfo
    .append("text")
    .attr("export-ignore",true)
    .attr("id","infoText")
    .attr("x",96)
    .attr("y",7)
    .attr("dy",".30em")
    .style("font-style","italic")
    .style("font-family","serif")
    .style("font-weight","bold")
    .text("i");

  // Transition nodes to their new position.
  //swap x and y for vertical layout
  var nodeUpdate = node.transition()
    .duration(duration)
    .attr("transform",function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });

  //nodeUpdate.select("circle")
  nodeUpdate.select("rect")
    .attr("width",rectH)
    .style("stroke","black")
    //  .attr("r",10)
    .style("fill",function(d) {
      return d._children ? "lightsteelblue" : "#fff";
    });

  nodeUpdate.select("text")
    .attr("x",rectW / 2)
    .attr("y",rectH / 2)
    .attr("dy","middle")
    .style("fill-opacity",1);

  // Transition exiting nodes to the parent's new position.
  //vertical switch x and y positions
  var nodeExit = node.exit().transition()
    .duration(duration)
    .attr("transform",function(d) {
      return "translate(" + source.x + "," + source.y + ")";
    })
    .remove();

  //nodeExit.select("circle")
  nodeExit.select("rect")
    .attr("r",1e-6);

  nodeExit.select("text")
    .style("fill-opacity",1e-6);

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

  // Enter any new links at the parent's previous position.
  link.enter().insert("path","g")
    .attr("class","link")
    .attr("stroke","#ccc")
    .attr("fill","none")
    .attr("stroke-width","2px")
    .attr("d",function(d) {
      var o = {
        x: source.x0,y: source.y0
      };
      return diagonal({
        source: o,target: o
      });
    });

  // Transition links to their new position.
  link.transition()
    .duration(duration)
    .attr("d",diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
    .duration(duration)
    .attr("d",function(d) {
      var o = {
        x: source.x,y: source.y
      };
      return diagonal({
        source: o,target: o
      });
    })
    .remove();

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

}

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

//*************************************************************************************
// 2. Append button somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button)
  .setAttribute("transform","translate(" + 0 + "," + 0 + ")");

//*************************************************************************************

function svgDataURL(svg) {
  var svgAsXML = (new XMLSerializer).serializeToString(svg);
  var dataURL = "data:image/svg+xml," + encodeURIComponent(svgAsXML);
  return dataURL;
}

button.onclick = function() {
  var svgElement = document.querySelector('svg');
  var svgWH = svgElement.getBBox();

  var canvasWidth = svgWH.width;
  var canvasHeight = svgWH.height;

  var groupElement = document.getElementById('fg');
  groupElement.setAttribute("transform","translate(0,0)");

  const bb = groupElement.getBBox();

  // clone the svg to avoid destroying it while appending to the svg namespace
  let clonedGroupElement = groupElement.cloneNode(true);

  var svgContent = document.createElementNS('http://www.w3.org/2000/svg','svg');

  svgContent.setAttribute('viewBox',' ' + bb.x + ' ' + bb.y + '  ' + bb.width + ' ' + bb.height);

  svgContent.setAttribute("width","100%");
  svgContent.setAttribute("height","100%");
  svgContent.setAttribute("preserveAspectRatio","xMidYMid meet");

  // try to remove the information icon before downloading
  clonedGroupElement.querySelectorAll('[export-ignore]').forEach(function(node) {
    node.remove();
  });

  svgContent.appendChild(clonedGroupElement); // use the cloned nodes

  var dl = document.createElement('a');
  document.body.appendChild(dl);
  dl.setAttribute("href",svgDataURL(svgContent)); // function svgDataURL expects a node
  dl.setAttribute("download","test.svg");
  dl.click();
  dl.remove();

  svgContent.removeChild(clonedGroupElement);
};
.node {
  cursor: pointer;
}

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

.node text {
  font: 12px sans-serif;
  text-anchor: middle;
}

.link {
  /*
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
Java在半透明框架/面板/组件上重新绘画
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName”和“ Class.forNamenewInstance”之间有什么区别？
Java“ Class.forName（）”和“ Class.forName（）。newInstance（）”之间有什么区别？
在此环境中不提供编译器也许是在JRE而不是JDK上运行？
在此环境中不提供编译器。也许是在JRE而不是JDK上运行？
Java用相同的方法在一个类中实现两个接口哪种接口方法被覆盖？
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖？
Java 什么是Runtime.getRuntimetotalMemory和freeMemory？
Java 什么是Runtime.getRuntime（）。totalMemory（）和freeMemory（）？
java.library.path中的java.lang.UnsatisfiedLinkError否*****dll
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的” 即使在同一包装中
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类怎么处理？
Java 导入两个具有相同名称的类。怎么处理？
Java 是否应该在HttpServletResponse.getOutputStream/getWriter上调用.close？
Java 是否应该在HttpServletResponse.getOutputStream（）/。getWriter（）上调用.close（）？
Java RegEx元字符和普通点？
Java RegEx元字符（。）和普通点？
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot