组织结构图 - 树、在线、动态、可折叠、图片 - 在 D3 中

【问题标题】：Organization chart - tree, online, dynamic, collapsible, pictures - in D3组织结构图 - 树、在线、动态、可折叠、图片 - 在 D3 中
【发布时间】：2015-09-04 18:02:37
【问题描述】：

我是网络开发的菜鸟。我正在尝试创建一个树状分层公司组织结构图。我尝试了 google 的 visualization chart 和 Mike Bostock 的 D3 Reingold tree。

我想要这些功能：

  • 树结构：自上而下 (google) 或从左到右 (D3)
  • 在线/动态：可在浏览器中查看并能够从 json（google 和 D3）中读取数据，而不是静态 visio 或 ppt 图
  • 可折叠：能够隐藏子树（两者）
  • 空间调整：节点应填充可见区域，以减少滚动（仅D3）
  • 属性：显示名称、标题和可能的图片（仅限 google）

我已经在上面标记了哪个工具允许哪些功能，afaik。
我更喜欢 D3 版本，因为它看起来很酷。
我可以修改 .json 以包含其他字段（标题、照片的 url 等） - 这是一个 sample

我的问题是 - 如何修改 D3 code 以显示员工姓名，然后在下一行显示标题，也许还有图片？

或者如果这不可行 - 我如何修改 google code 以自动调整间距，以便节点的所有子节点靠近在一起，而我不必水平滚动？

【问题讨论】：

  • 我不太了解 D3.js，无法在那里回答您的问题。不过，我确实非常了解 Google Charts API，而且……我们只是说，根据您提出问题的方式，您不想尝试更改组织结构图上的间距。渲染的组织结构图实际上只是一个非常复杂的 HTML 表格，上面应用了一些精美的 CSS。它不是很灵活。它需要一些非常疯狂的 CSS 或 jQuery voodoo 才能让它做任何事情，而不是它已经做的事情。
  • @Balrog30 - 是的，我希望谷歌图表自动调整间距 - 我用代码示例重新表述了问题 here。
  • 我的意思是，为了完成您所描述的事情，您将编写一些几乎与 Google Charts API 正在绘制的内容一样复杂的内容。我对 D3 了解不多，但我知道它是开源且可扩展的。谷歌图表不是。在这种情况下，使用 D3.js 可能会更好。只要您愿意接受 Google 免费为您提供的内容，Google 图表就非常好用且易于使用。

标签： javascript html d3.js google-visualization


【解决方案1】：

如果你喜欢用 D3js 创建你的项目，只需要使用 this 中的 script 代码并将d3.json("/mbostock/raw/4063550/flare.json", function(error, flare) 替换为：

d3.json("yourJsonFile/jsonFileName.json", function(error, flare)

jsonFileName.json 是您自定义的 json 文件，例如 sample。 您也可以将图片的名称插入到 json 文件中，并用它替换 img 标签 src。

【讨论】：

  • 我之前可能不清楚。我已经修改了代码以读取我的示例 .json 而不是给定的flare.json。但是我如何“打印”额外的字段？例如在第 96 行，我连接了 title 和 name text(function(d) { return d.name+' , '+d.title; }) ，但是如何添加图像 src ？我希望每个值都在一个新行中。
  • D3 非常灵活，您可以根据需要自定义数据。有一个函数可以添加每个 html 标签，例如 img append() 函数。只需要写这段代码d3.select("body").append("img")，你可以用attr()改变属性，所以更新我们的代码：d3.select("body").append("img").attr("src",'srcPath+name')。有一点我必须提到，您可以创建分隔标签并使用attr("transform","translate("+x+","+y")" 更改它们的位置x,y 可以是任何位置。您不能在svg 内添加img 标签。
  • 这个link 将帮助您学习d3.js。尽情享受吧。
【解决方案2】：

这是一个快速的example。它修改了这个example，添加了名字、姓氏、标题和图片。

<!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 margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 960 - margin.right - margin.left,
    height = 300 - 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 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 data = {
  "fname": "Rachel",
  "lname": "Rogers",
  "title": "CEO",
  "photo": "http://lorempixel.com/60/60/cats/1",
  "children": [{
        "fname": "Bob",
        "lname": "Smith",
        "title": "President",
        "photo": "http://lorempixel.com/60/60/cats/2",
        "children": [{
              "fname": "Mary",
              "lname": "Jane",
              "title": "Vice President",
              "photo": "http://lorempixel.com/60/60/cats/3",
              "children": [{
                "fname": "Bill",
                "lname": "August",
                "title": "Dock Worker",
                "photo": "http://lorempixel.com/60/60/cats/4"
              }, {
                "fname": "Reginald",
                "lname": "Yoyo",
                "title": "Line Assembly",
                "photo": "http://lorempixel.com/60/60/cats/5"
              }]
            }, {
              "fname": "Nathan",
              "lname": "Ringwald",
              "title": "Comptroller",
              "photo": "http://lorempixel.com/60/60/cats/6"
            }]
  }]
}

root = data;
root.x0 = height / 2;
root.y0 = 0;

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

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

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 + ")"; })
      .on("click", click);

  // add picture
  nodeEnter
    .append('defs')
    .append('pattern')
    .attr('id', function(d,i){
      return 'pic_' + d.fname + d.lname;
    })
    .attr('height',60)
    .attr('width',60)
    .attr('x',0)
    .attr('y',0)
    .append('image')
    .attr('xlink:href',function(d,i){
      return d.photo;
    })
    .attr('height',60)
    .attr('width',60)
    .attr('x',0)
    .attr('y',0);

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

  var g = nodeEnter.append("g");
  
  g.append("text")
      .attr("x", function(d) { return d.children || d._children ? -35 : 35; })
      .attr("dy", "1.35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.fname + " " + d.lname; })
      .style("fill-opacity", 1e-6);
      
    g.append("text")
      .attr("x", function(d) { return d.children || d._children ? -35 : 35; })
      .attr("dy", "2.5em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.title; })
      .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", 30)
      .style("fill", function(d,i){
        return 'url(#pic_' + d.fname + d.lname+')';
      });

  nodeUpdate.selectAll("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 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);
}

</script>

反转方向：

<!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 margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 960 - margin.right - margin.left,
    height = 300 - 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.x, d.y]; });

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 data = {
  "fname": "Rachel",
  "lname": "Rogers",
  "title": "CEO",
  "photo": "http://lorempixel.com/60/60/cats/1",
  "children": [{
        "fname": "Bob",
        "lname": "Smith",
        "title": "President",
        "photo": "http://lorempixel.com/60/60/cats/2",
        "children": [{
              "fname": "Mary",
              "lname": "Jane",
              "title": "Vice President",
              "photo": "http://lorempixel.com/60/60/cats/3",
              "children": [{
                "fname": "Bill",
                "lname": "August",
                "title": "Dock Worker",
                "photo": "http://lorempixel.com/60/60/cats/4"
              }, {
                "fname": "Reginald",
                "lname": "Yoyo",
                "title": "Line Assembly",
                "photo": "http://lorempixel.com/60/60/cats/5"
              }]
            }, {
              "fname": "Nathan",
              "lname": "Ringwald",
              "title": "Comptroller",
              "photo": "http://lorempixel.com/60/60/cats/6"
            }]
  }]
}

root = data;
root.x0 = height / 2;
root.y0 = 0;

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

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

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.x0 + "," + source.y0 + ")"; })
      .on("click", click);

  // add picture
  nodeEnter
    .append('defs')
    .append('pattern')
    .attr('id', function(d,i){
      return 'pic_' + d.fname + d.lname;
    })
    .attr('height',60)
    .attr('width',60)
    .attr('x',0)
    .attr('y',0)
    .append('image')
    .attr('xlink:href',function(d,i){
      return d.photo;
    })
    .attr('height',60)
    .attr('width',60)
    .attr('x',0)
    .attr('y',0);

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

  var g = nodeEnter.append("g");
  
  g.append("text")
      .attr("x", function(d) { return d.children || d._children ? -35 : 35; })
      .attr("dy", "1.35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.fname + " " + d.lname; })
      .style("fill-opacity", 1e-6);
      
    g.append("text")
      .attr("x", function(d) { return d.children || d._children ? -35 : 35; })
      .attr("dy", "2.5em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.title; })
      .style("fill-opacity", 1e-6);

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

  nodeUpdate.select("circle")
      .attr("r", 30)
      .style("fill", function(d,i){
        return 'url(#pic_' + d.fname + d.lname+')';
      });

  nodeUpdate.selectAll("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.x + "," + source.y + ")"; })
      .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 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);
}

</script>

【讨论】：

  • @sqld-_-ba，对不起，我对任何雇佣工作都不感兴趣。
  • @Learning，查看更新的答案，基本上只是颠倒xs和ys
  • 那些图像看起来很模糊。你知道怎么解决吗？
  • 我简直不敢相信你在这个答案中投入的时间/精力，我刚刚给出了一个示例 json 和几个简短的 sn-ps 供 OP 做作业。顺便说一句，我在这里寻找一种使画布高度流动的方法。你能指出我正确的方向吗？
  • @Flame113 你是对的......图像看起来确实很模糊。我能够使用 viewbox 解决这个问题。看看这个：stackoverflow.com/questions/29442833/svg-image-inside-circle
猜你喜欢
  • 2021-10-15
  • 1970-01-01
  • 1970-01-01
  • 2021-11-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode