D3 사용자 정의 접근자를 사용하는 geom.hull

Question

D3 설명서에 따르면 선체 방법에 x 및 y 좌표를 가져 오는 사용자 지정 액세서를 할당 할 수 있습니다.

Hull documentation

나는이 사용자 정의을 액세서 사용하고 싶습니다,하지만 난 구문을 알아낼 수 없습니다. 이것은 내가 수동으로 내 vertices 배열을 변형하는 기본적으로 비할 데없는 해결 방법입니다.

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 값 대신 직접 내 배열을 변환에 의존 할 필요.

여기에 내가 처음에 그것을 원하는 방식으로 작동하는 코드를 가지고 조금 시도 후 fiddle.

Answer 1

을합니다.

사용자 정의 접근을 설정하는 핵심은이었다

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/

:

var customHull = d3.geom.hull(); 
customHull.x(function(d){return d.x;}); 
customHull.y(function(d){return d.y;}); 

그리고 여기에 전체 코드입니다