d3.js 中的自定义布局？答案

【问题标题】：Custom layout in d3.js?d3.js 中的自定义布局？
【发布时间】：2015-02-13 08:51:28
【问题描述】：

如何在 d3.js 中创建自定义布局？

任何链接或示例都会有所帮助

我不想要 d3 使用的标准布局，想自己写。

【问题讨论】：

你可能会发现这个link很有帮助
如果他的回答有效，您应该将其标记为完成，或评论为什么它不满足您的问题。

标签： layout d3.js

【解决方案1】：

布局函数可以是一个简单的函数，它将坐标（以及绘图的任何其他数据，如 startAngle、endAngle...）分配给您的数据，然后返回节点列表的数组。一个简单的例子：

function myLayout(data) {
   var nodes = [];   // or reuse data directly depending on layout
   // for each element of data, assign a x,y coordinate)
   return nodes;
}

var nodes = myLayout(myData);
var g = d3.selectAll('g.node').data(nodes);
g.enter().append('g').attr('class', 'node');
g.attr('transform', function(d) {
   return 'translate(' + d.x + ',' + d.y + ')'});

这是基本的基本方法。如果你想遵循 d3 自己的代码结构，布局将返回一个与上面相同的函数，但有额外的函数来配置它：

function myLayout() {
   var space = 1;
   function compute(data) {
       // same as before
   }
   compute.space = function(s) {
       if (!arguments.length) return space;
       space = s;
       return this;   // chaining
   }
   return compute;
}
var layout = myLayout().space(10);
var nodes = layout(myData);
...

【讨论】：