d3js 径向整洁树 - dx 和 dy 如何填充？答案

【问题标题】：d3js radial tidy tree - how are dx and dy populated?d3js 径向整洁树 - dx 和 dy 如何填充？
【发布时间】：2016-11-27 23:09:09
【问题描述】：

我是 d3js 的初学者，正在玩弄一个非常简单的径向整洁树。

我编写了以下代码来生成一棵树。

139 function radialTree(window, svg, data) {
140  debugger; 
141   console.log("Will build radial tree here...");
142   var result = radTree.transform(data);
143   console.log("tree data:", result);                                                                                                                                                                                                      
144 
145   g = svg.append("g").attr("transform", "translate(" + (w / 2 + 40) + "," + (h / 2 + 90) + ")");
146 
147   var stratify = d3.stratify()
148             .parentId(function(d) { return d.parent;});
149   var tree = d3.tree()
150               .size([360, 500])
151               .separation(function(a,b) { return (a.parent == b.parent?1:2)/a.depth; });
152   var root = d3.hierarchy(result); 
153 
154   var link = g.selectAll(".link")             
155               .data(root.descendants().slice(1))
156               .enter().append('path')         
157               .attr('class', 'link')          
158               .attr('d', function(d) {          
159                 debugger;
160                 return "M" + project(d.x, d.y)        
161                       + "C" + project(d.x, (d.y + d.parent.y)/2)
162                       + " " + project(d.parent.x, (d.y + d.parent.y)/2)
163                       + " " + project(d.parent.x, d.parent.y)
164               });
165 
166   var node = g.selectAll(".node")             
167               .data(root.descendants())       
168               .enter().append('g')            
169               .attr('class', function(d) { return "node" + (d.children?" node--internal":" node--leaf"); })                
170               .attr('transform', function(d) { return "translate(" + project(d.x, d.y) + ")"; })
171 
172   node.append('circle').attr('r', 2.5);
173   node.append('text')
174      .attr('dy', '.31em')
175      .attr('x', function(d) { return d.x < 180 === !d.children ? 6: -6; })
176      .style('text-anchor', function(d) { return d.x < 180 === !d.children ? "start":"end"; })
177      .attr('transform', function(d) { return "rotate(" + (d.x<180? d.x-90 : d.x+90) + ")"; })
178      .text(function(d) { return d.name; });
179 
180   return svg;
181 }
182 
183 function project(x, y) {
184   var angle = (x-90)/180 * Math.PI,  radius = y;
185   return [radius*Math.cos(angle), radius*Math.sin(angle)];
186 }
187

因为，我有一个由分层生成的形式的树数据（我猜是这样），我没有显式调用分层（）函数。提供给树函数的 json 数据如下：

tree data: { parent: null,
  name: 'root',
  id: 'root',
  status: 'green',
  depth: 0,
  children: 
   [ { parent: 'root',
       name: 'authServer',
       id: 'authServer',
       status: 'green',
       depth: 1,
       children: [Object] },
     { parent: 'root',
       name: 'dndServer',
       id: 'dndServer',
       status: [Object],
       depth: 1,
       children: [Object] },
     { parent: 'root',
       name: 'accServer',
       id: 'accServer',
       status: 'green',
       depth: 1,
       children: [Object] },
     { parent: 'root',
       name: 'contactPolicyServer',
       id: 'contactPolicyServer',
       status: 'green',
       depth: 1,
       children: [Object] },
     { parent: 'root',
       name: 'DB',
       id: 'DB',
       status: undefined,
       depth: 1 },
     { parent: 'root',
       name: 'fileServer',
       id: 'fileServer',
       status: 'green',
       depth: 1,
       children: [Object] },
     { parent: 'root',
       name: 'campaignServer',
       id: 'campaignServer',
       status: 'green',
       depth: 1,
       children: [Object] } ] }

当它在浏览器上呈现时，我只看到绘制了一个圆圈，并且 Web 控制台显示了很多错误，因为 svg 转换函数收到了一个 NaN 值。

在尝试调试问题时，我发现传递给回调函数的“d”对象没有名为“x”或“y”的键。对象 'd' 的调试输出如下所示：

break in ind.js:159
 157               .attr('class', 'link')
 158               .attr('d', function(d) {
>159                 debugger;
 160                 return "M" + project(d.x, d.y)
 161                       + "C" + project(d.x, (d.y + d.parent.y)/2)
repl
Press Ctrl + C to leave debug repl
> d
{ data: 
   { parent: 'root',
     name: 'authServer',
     id: 'authServer',
     status: 'green',
     depth: 1,
     children: [ [Object], [Object] ] },
  height: 1,
  depth: 1,
  parent: 
   { data: 
      { parent: null,
        name: 'root',
        id: 'root',
        status: 'green',
        depth: 0,
        children: [Object] },
     height: 2,
     depth: 0,
     parent: null,
     children: 
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] },
  children: 
   [ { data: [Object], height: 0, depth: 2, parent: [Object] },
     { data: [Object], height: 0, depth: 2, parent: [Object] } ] }

我想知道 d.x 和 d.y 的值何时、何地以及如何填充，以便可以在回调函数中安全地使用它们...

【问题讨论】：

标签： javascript d3.js svg tree

【解决方案1】：

d3.tree() 函数设置x 和y 属性。根据文档，d3.tree():

布置指定的根层次结构，为根及其后代分配以下属性：

node.x - 节点的 x 坐标

node.y - 节点的 y 坐标

因此，既然你定义了你的d3.tree()：

var tree = d3.tree()
    .size([360, 500])
    .separation(function(a,b){
        return (a.parent == b.parent ? 1 : 2)/a.depth;
    });

还有你的层次结构：

var root = d3.hierarchy(result);

下一步应该是：

root = tree(root);

这将填充x 和y 属性。

PS：我只是在回答你的问题（“dx 和 dy 是如何填充的？”），而不是调试你的代码。

【讨论】：