d3.js中的自定义布局? [英] Custom layout in d3.js?
问题描述
如何在d3.js中创建自定义布局?
How to create custom layout in d3.js ?
任何链接或示例都有助于
Any links or examples would help
不想要标准布局d3使用,想自己写。
I don't want standard layouts d3 uses , want to write my own .
推荐答案
布局函数可以是一个简单的函数,坐标(和图形的任何附加数据,如startAngle,endAngle,...),然后返回一个数组用于节点列表。一个快速示例:
A layout function could be a simple function that assign coordinates (and any additional data for the drawing like startAngle, endAngle, ...) to your data, and then return an array for the list of nodes. A quick example:
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自己的代码结构,布局将返回一个与上面相同的函数,但是有一些额外的函数来配置它:
This is the basic bare bone approach. If you want to follow d3's own code structure, the layout would return a function that does the same as above, but has additional functions to configure it:
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);
...
这篇关于d3.js中的自定义布局?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!