Javascript 对D3中的标签使用HTML_Javascript_Html_D3.js_Svg

Javascript 对D3中的标签使用HTML

javascript html d3.js svg

Javascript 对D3中的标签使用HTML,javascript,html,d3.js,svg,Javascript,Html,D3.js,Svg,我有一个D3可折叠树的简单示例，主要是从教程中的示例复制和粘贴的。我试图看看是否可以用HTML替换标签的显示方式（当前为文本），以便在标签上设置一些格式。我环顾四周，发现HTML可以与svg:foreignObject一起使用，但我不太确定在这种情况下如何使用。这是我的密码 <!DOCTYPE html> <meta charset="utf-8"> <style> .node { cursor: pointer; } .node circle {

我有一个D3可折叠树的简单示例，主要是从教程中的示例复制和粘贴的。我试图看看是否可以用HTML替换标签的显示方式（当前为文本），以便在标签上设置一些格式。我环顾四周，发现HTML可以与svg:foreignObject一起使用，但我不太确定在这种情况下如何使用。这是我的密码

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

.node {
  cursor: pointer;
}

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

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

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

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var treeData = [
  {
    "name": "Rutgers",
    "children": [
      {
        "name": "Rutgers New Brunswick",
        "children": [
          {
            "name": "Rutgers School of Arts and Science",
          },
          {
            "name": "Rutgers Business School",
          },
        ]
      },
      {
        "name": "Rutgers Newark",
      },
    ]
  },
];



var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 960 - margin.right - margin.left,
    height = 800 - margin.top - margin.bottom;

var i = 0,
    duration = 750,
    root;

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

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var line = d3.svg.line()
             .x(function(d){ return d.x; })
             .y(function(d){return d.y; });

    function lineData(d){
        var points = [
            {x: d.source.y, y: d.source.x},
            {x: d.target.y, y: d.target.x}
        ]
        return line(points);
    }


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 + ")");


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


  root.children.forEach(collapse);
  update(root);

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

function collapse(d) {
    if (d.children) {
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
    }
  }

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.
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })

  nodeEnter.append("circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
      .on("click", click);

  nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .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);

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

  nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeUpdate.select("text")
      .style("fill-opacity", 1);

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

  nodeExit.select("circle")
      .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("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return lineData({source: o, target: o});
      });

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

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

</script>
</body>


.节点{
光标：指针；
}
.节点圆{
填充：#fff；
笔画：钢蓝；
笔划宽度：1.5px；
}
.节点文本{
字体：10px无衬线；
}
.链接{
填充：无；
冲程：#ccc；
笔划宽度：1.5px；
}
变量treeData=[
{
“名称”：“罗格斯大学”，
“儿童”：[
{
“名称”：“罗格斯大学新不伦瑞克分校”，
“儿童”：[
{
“名称”：“罗格斯艺术与科学学院”，
},
{
“名称”：“罗格斯商学院”，
},
]
},
{
“名称”：“罗格斯纽瓦克”，
},
]
},
];
var margin={顶部：20，右侧：120，底部：20，左侧：120}，
宽度=960-margin.right-margin.left，
高度=800-margin.top-margin.bottom；
var i=0，
持续时间=750，
根；
var tree=d3.layout.tree（）
.尺寸（[高度、宽度]）；
var diagonal=d3.svg.diagonal（）
.投影（函数（d）{返回[d.y，d.x]；}）；
var line=d3.svg.line（）
.x（函数（d）{返回d.x；}）
.y（函数（d）{返回d.y；}）；
函数行数据（d）{
变量点=[
{x:d.source.y，y:d.source.x}，
{x:d.target.y，y:d.target.x}
]
返回线（点）；
}
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
根=树数据[0]；
root.x0=高度/2；
root.y0=0；
根。子。forEach（塌陷）；
更新（根）；
d3.选择（self.frameElement）.style（“高度”，“800px”）；
功能崩溃（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 _儿童。forEach（崩溃）；
d、 children=null；
}
}
函数更新（源）{
//计算新的树布局。
var nodes=tree.nodes（root）.reverse（），
链接=树。链接（节点）；
//为固定深度进行规格化。
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（“transform”，函数（d）{return“translate”（“+source.y0+”，“+source.x0+”））；}）
nodeEnter.append（“圆”）
.attr（“r”，1e-6）
.style（“fill”，函数（d）{return d._children？“lightsteelblue”：“#fff”}）
。开启（“点击”，点击）；
nodeEnter.append（“文本”）
.attr（“x”，函数（d）{返回d.children | | d._children？-10:10；}）
.attr（“dy”，“.35em”）
.attr（“文本锚定”，函数（d）{return d.children | | d.| u children？“end”：“start”}）
.text（函数（d）{返回d.name；}）
.样式（“填充不透明度”，1e-6）；
//将节点转换到其新位置。
var nodeUpdate=node.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{return“translate”（+d.y+），“+d.x+”）；}）；
节点更新。选择（“圆圈”）
.attr（“r”，4.5）
.style（“fill”，函数（d）{return d._children？“lightsteelblue”：“fff”}）；
nodeUpdate.select（“文本”）
.样式（“填充不透明度”，1）；
//将退出节点转换到父节点的新位置。
var nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
.attr（“transform”，函数（d）{return“translate”（“+source.y+”，“+source.x+”）”）；}）
.remove（）；
nodeExit.select（“圆”）
.attr（“r”，1e-6）；
nodeExit.select（“文本”）
.样式（“填充不透明度”，1e-6）；
//更新链接�
var link=svg.selectAll（“path.link”）
.data（链接，函数（d）{返回d.target.id；}）；
//在父对象的上一个位置输入任何新链接。
link.enter（）插入（“路径”，“g”）
.attr（“类”、“链接”）
.attr（“d”，函数（d）{
var o={x:source.x0，y:source.y0}；
返回lineData（{source:o，target:o}）；
});
//过渡链接到他们的新位置。
link.transition（）
.持续时间（持续时间）
.attr（“d”，线条数据）；
//将退出节点转换到父节点的新位置。
link.exit（）.transition（）
.持续时间（持续时间）
.attr（“d”，函数（d）{
var o={x:source.x，y:source.y}；
返回lineData（{source:o，target:o}）；
})
.remove（）；
//将旧位置隐藏起来，以便过渡。
nodes.forEach（函数（d）{
d、 x0=d.x；
d、 y0=d.y；
});
}
//在单击时切换子项。
功能点击（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则{
d、 儿童=d.\U儿童；
d、 _children=null；
}
更新（d）；
}

这里有一个麦克风示例：

这里是您的示例：。只需将html替换为您的内容

nodeEnter.append("foreignObject")
    .attr("width", 100)
    .attr("height", 100)
  .append("xhtml:body")
    .style("font", "14px 'Helvetica Neue'")
    .html("<h1>An HTML Foreign Object in SVG</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Donec eu enim quam. Quisque nisi risus, sagittis quis tempor
          nec, aliquam...

然后在

正如@Mark提到的，没有IE支持

我不会求助于使用

foreignObject

，除非你绝望（没有IE支持）。你需要做什么样的格式化？马克，每个节点都会有更多的数据，我想以格式化的方式显示，可以是表格数据，也可以是列表数据。有没有一种简单的方法可以将nodeEnter.append（“文本”）替换为nodeEnter.append（“html”）？

nodeEnter.append("foreignObject")
    .attr("width", 100)
    .attr("height", 100)
    .attr("class", "myBeautifulText")

.myBeautifulText {
    font-size: 1em;
    .....
    }
.myBeautifulText > h1 {
       .....
    }
.myBeautifulText > p {
       .......
    }