Question

我正在尝试按照here执行可折叠树的代码。但似乎对角线方法在v4中不适用（我可能错了）。

对于：

var diagonal = d3.svg.diagonal()

我收到此错误：

TypeError：无法读取未定义
的属性“对角线”

v4中的等价物是什么？看看d3.js API参考文献并没有给我任何线索。

Answer 1

~~更新：accepted answer已经过时，因为D3 v4.9已经发布。~~

D3版本4.9.0引入了link shapes，其功能与D3 v3中的旧版d3.svg.diagonal相同。

根据API：

链接形状生成从源点到目标点的平滑立方贝塞尔曲线。开始和结束时曲线的切线是垂直的，水平的或径向的。

有三种方法：

因此，对于您所链接的可折叠树，您可以将路径d属性定义为：

.attr("d", d3.linkHorizontal()
    .x(function(d) { return d.y; })
    .y(function(d) { return d.x; }));

<强>演示：

假设您有一个包含source和target的对象，每个对象都有x和y属性：

var data = {
  source: {
    x: 20,
    y: 10
  },
  target: {
    x: 280,
    y: 100
  }
};

首先，创建链接生成器：

var link = d3.linkHorizontal()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });

然后您只需将该数据传递给链接生成器即可绘制路径：

.attr("d", link(data))

以下是演示：

var svg = d3.select("svg");

var data = {
  source: {
    x: 20,
    y: 10
  },
  target: {
    x: 280,
    y: 100
  }
};

var link = d3.linkHorizontal()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });

svg.append("path")
  .attr("d", link(data))
  .style("fill", "none")
  .style("stroke", "darkslateblue")
  .style("stroke-width", "4px");

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

Answer 2

请参阅GitHub问题here。

虽然问题仍未解决，但看起来Bostock先生并不急于在第4版中重新实施。为什么？因为实现自己是微不足道的：

function link(d) {
  return "M" + d.source.y + "," + d.source.x
      + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
      + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
      + " " + d.target.y + "," + d.target.x;
}

Answer 3

我很难过这个，然后几个小时后，我意识到这真的很容易（就像其他提到它的人一样）。替换：

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

...与此：

var diagonal = function link(d) {
  return "M" + d.source.y + "," + d.source.x
      + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
      + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
      + " " + d.target.y + "," + d.target.x;
};

那应该是唯一的变化。希望这对其他人有帮助。这应该适用于Patrick Brockman's Collapsible/Searchable Tree之类的可视化。

Answer 4

对于那些有垂直树的人，下面的函数将产生弯曲的对角线，如 this example 所示。

此函数是根据 Mark 的回答修改的，方法是 (1) 切换 x 和 y 调用，以及 (2) 更改两条中间线的计算坐标。在没有坐标变化的情况下，曲线反转，如this post。

var diagonal = function link(d) {
  return "M" + d.source.x + "," + d.source.y
      + "C" + d.source.x + "," + (d.source.y + d.target.y) / 2
      + " " + d.target.x + "," + (d.source.y + d.target.y) / 2
      + " " + d.target.x + "," + d.target.y;
};

附带说明，如果您想要四四方方的而不是弯曲的边缘，可以将 "C" 替换为 " "。

Answer 5

我和你有同样的问题，Tadaa！此处提供了 D3 的 V6 的新版本树（基于 Mike Bostock 的工作）： https://bl.ocks.org/d3noob/9de0768412ac2ce5dbec430bb1370efe

我粘贴了下面的代码，以防 url 因未知原因消失：

<块引用>

.node circle { 填充：#fff;笔画：钢蓝；描边宽度：3px； }

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

.link { 填充：无；中风：#ccc;描边宽度：2px； }

src="https://d3js.org/d3.v6.min.js">

var treeData = { "name": "顶级", “孩子们”： [ { "name": "级别 2：A", “孩子们”： [ { "name": "A 的儿子" }, { "name": "A 的女儿" } ] }, { "name": "Level 2: B" } ] };

// 设置图表的尺寸和边距 var margin = {top: 20，右：90，下：30，左：90}，宽度 = 960 - margin.left - margin.right，高度 = 500 - margin.top - margin.bottom;

// 将 svg 对象附加到页面主体 // 附加一个“组” element to 'svg' // 将 'group' 元素移动到左上角 var svg = d3.select("body").append("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("转换", "翻译(" + margin.left + "," + margin.top + ")");

变量 i = 0, 持续时间 = 750, 根;

// 声明一个树布局并分配大小 var treemap = d3.tree().size([高度, 宽度]);

// 分配父级、子级、高度、深度 root = d3.hierarchy(treeData, function(d) { return d.children; });根.x0 = 高度/2； root.y0 = 0;

// 第二级后折叠 root.children.forEach(collapse);

更新（根）;

// 折叠节点及其所有子节点 function collapse(d) {
如果（d.儿童）{ d._children = d.children d._children.forEach(折叠) d.children = null } }

函数更新（来源）{

// 为节点分配 x 和 y 位置 var treeData = 树状图（根）;

// 计算新的树布局。 var 节点 = treeData.descendants(), 链接 = treeData.descendants().slice(1);

// 标准化固定深度。 nodes.forEach(function(d){ d.y = d.深度 * 180});

// ******************** 节点部分 ************************ **

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

// 在父级之前的位置输入任何新模式。无功 nodeEnter = node.enter().append('g') .attr('类', '节点') .attr（“转换”，函数（d）{ return "translate(" + source.y0 + "," + source.x0 + ")"; }) .on('点击', 点击);

// 为节点添加圆 nodeEnter.append('circle') .attr('类', '节点') .attr('r', 1e-6) .style（“填充”，函数（d）{ 返回 d._children ？ "lightsteelblue": "#fff"; });

// 为节点添加标签 nodeEnter.append('text') .attr("dy", ".35em") .attr（“x”，函数（d）{ 返回 d.children || d._儿童？ -13：13； }) .attr（“文本锚”，函数（d）{ 返回 d.children || d._儿童？ “结束”：“开始”； }) .text(function(d) { return d.data.name; });

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

// 转移到合适的节点位置
nodeUpdate.transition() .duration（持续时间） .attr（“转换”，函数（d）{ 返回 "translate(" + d.y + "," + d.x + ")"; });

// 更新节点属性和样式
nodeUpdate.select('circle.node') .attr('r', 10) .style（“填充”，函数（d）{ 返回 d._children ？ "lightsteelblue": "#fff"; }) .attr('光标', '指针');

// 移除所有存在的节点 var nodeExit = node.exit().transition() .duration（持续时间） .attr（“转换”，函数（d）{ return "translate(" + source.y + "," + source.x + ")"; }) .remove();

// 在退出时将节点圆圈大小减小到 0
nodeExit.select('圆圈') .attr('r', 1e-6);

// 退出时降低文本标签的不透明度
nodeExit.select('文本') .style('fill-opacity', 1e-6);

// ******************** 链接部分 ************************ **

// 更新链接... var link = svg.selectAll('path.link') .data(links, function(d) { return d.id; });

// 在父级之前的位置输入任何新链接。无功 linkEnter = link.enter().insert('path', "g") .attr（“类”，“链接”） .attr('d', 函数(d){ var o = {x: source.x0, y: source.y0} 返回对角线(o, o) });

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

// 过渡回父元素位置
linkUpdate.transition() .duration（持续时间） .attr('d', function(d){ return diagonal(d, d.parent) });

// 删除所有现有链接 var linkExit = link.exit().transition() .duration（持续时间） .attr('d', 函数(d) { var o = {x: source.x, y: source.y} 返回对角线(o, o) }) .remove();

// 存储用于过渡的旧位置。
节点.forEach（函数（d）{ d.x0 = d.x; d.y0 = d.y; });

// 创建从父节点到子节点的弯曲（对角线）路径
函数对角线（s，d）{ 路径 = `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.children = d._children; d._children = null; } 更新）; } }

您还会发现一些其他示例there

d3.svg.diagonal（）在哪里？

5 个答案: