D3 geom.hull с кастомными аксессуарами

Согласно документации D3, методу корпуса могут быть назначены специальные средства доступа для получения координат x и y.

Документация по корпусу

Я хотел бы использовать эти специальные средства доступа, но не могу понять синтаксис. Это то, что я сделал, и это, по сути, нелегкий обходной путь, когда я вручную трансформирую свой verticesarray.

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 моего массива вершин напрямую, вместо того, чтобы прибегать к преобразованию моего массива.

Вот скрипка.


javascript svg d3.js convex-hull
person Tibor Udvari    schedule 13.01.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробовав немного, я получил код, работающий так, как я хотел изначально.

Ключом к настройке пользовательских аксессуаров было:

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/

person Tibor Udvari    schedule 13.01.2014