D3 geom.hull,带有自定义访问器 [英] D3 geom.hull with custom accessors
问题描述
根据D3文档,可以为hull方法分配自定义访问器,以获取x和y坐标.
According to the D3 documentation the hull method can be assigned custom accessors to get the x and y coordinates.
我想使用这些自定义访问器,但是我无法弄清楚语法.这就是我所做的,这基本上是一个简单的解决方法,在该方法中,我手动转换了vertices
数组.
I would like to use these custom accessors, but I can not figure out the syntax. This is what I have done which is basically an unelegant workaround where I manually transform my vertices
array.
var width = 900,
height = 600;
var svg = d3.select("#content").append("svg")
.attr("width", width)
.attr("height", height);
var hull = svg.append("path")
.attr("class", "hull");
var circle = svg.selectAll("circle");
var vertices = [{"keyWord" : "key", "x" : 10, "y" : 20},
{"keyWord" : "key1", "x" : 0, "y" : 10},
{"keyWord" : "key2", "x" : 100, "y" : 25},
{"keyWord" : "key3", "x" : 80, "y" : 50},
{"keyWord" : "key4", "x" : 15, "y" : 35},
{"keyWord" : "key4", "x" : 500, "y" : 500},
];
test = [];
vertices.forEach(function(node){
test.push([node.x, node.y]);
});
redraw();
function redraw(){
hull.datum(d3.geom.hull(test)).attr("d", function(d) { return "M" + d.join("L") + "Z"; });
circle = circle.data(vertices);
circle.enter().append("circle").attr("r", 3);
circle.attr("transform", function(d){ return "translate(" + d + ")";});
}
我希望一个示例能够直接使用我的顶点数组的 x 和 y 值,而不必求助于变换我的数组.
I would like an example to be able to use my vertices array's x and y values directly instead of having to resort to transforming my array.
这是小提琴.
推荐答案
稍作尝试后,我得到了按我最初想要的方式工作的代码.
After trying a little bit I got the code working the way I wanted it initially.
设置自定义访问器的关键是:
The key to setting the custom accessors was :
var customHull = d3.geom.hull();
customHull.x(function(d){return d.x;});
customHull.y(function(d){return d.y;});
这是完整的代码:
var width = 900,
height = 600;
var svg = d3.select("#content").append("svg")
.attr("width", width)
.attr("height", height);
var hull = svg.append("path")
.attr("class", "hull");
var circle = svg.selectAll("circle");
vertices = [{"keyWord" : "key", "x" : 10, "y" : 20},
{"keyWord" : "key1", "x" : 0, "y" : 10},
{"keyWord" : "key2", "x" : 100, "y" : 25},
{"keyWord" : "key3", "x" : 80, "y" : 50},
{"keyWord" : "key4", "x" : 15, "y" : 35},
{"keyWord" : "key5", "x" : 500, "y" : 500},
];
var customHull = d3.geom.hull();
customHull.x(function(d){return d.x;});
customHull.y(function(d){return d.y;});
redraw();
function redraw(){
hull.datum(customHull(vertices)).attr("d", function(d) { console.log(d); return "M" + d.map(function(n){ return [n.x, n.y] }).join("L") + "Z"; });
circle = circle.data(vertices);
circle.enter().append("circle").attr("r", 3);
circle.attr("transform", function(d){ return "translate(" + d + ")";});
}
和jsFiddle http://jsfiddle.net/udvaritibor/3YC5C/1/
And the jsFiddle http://jsfiddle.net/udvaritibor/3YC5C/1/
这篇关于D3 geom.hull,带有自定义访问器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!