用任意 x 和 y 名称初始化 d3 四叉树答案

【问题标题】：initialise d3 quadtree with arbitrary x and y names用任意 x 和 y 名称初始化 d3 四叉树
【发布时间】：2016-02-12 09:52:33
【问题描述】：

我想使用没有标记为 x 和 y 的列但具有一些其他标签的数据来设置 d3 四叉树。阅读四叉树文档我认为我可以这样做：

var data = [{"a":6,"b":99.0},{"a":12,"b":227.0},{"a":2,"b":43.0},{"a":23,"b":32.0}];

var xname = "a";
var yname = "b";

var quadtree = d3.geom.quadtree(data)
.x(function(d) {return d[xname]; })
.y(function(d) {return d[yname]; });

但是当我运行这段代码时，我得到一个错误：

TypeError: d3.geom.quadtree(data).x is not a function. (In 'd3.geom.quadtree(data).x(function(d) {return d[xname]; })', 'd3.geom.quadtree(data).x' is undefined)

如何设置四叉树以使用不同的 x 和 y 标签？（显然我可以将数据更改为使用“x”和“y”，但有一些原因我不想这样做。）

【问题讨论】：

标签： javascript d3.js quadtree

【解决方案1】：

不要创建传递数据的四叉树

例如：

var data = [{"a":6,"b":99.0},{"a":12,"b":227.0},{"a":2,"b":43.0},{"a":23,"b":32.0}];

var xname = "a";
var yname = "b";


var quadtree = d3.geom.quadtree(/* nothing here */)
     .x(function(d) {return d[xname]; })
     .y(function(d) {return d[yname]; });

数据绑定必须稍后追加

d3.selectAll('circle').data(quadtree(data))
   .append('circle');

【讨论】：