d3 принудительное расположение позиции макета в узле

Question

Я читал несколько вопросов о раскладке d3 force, но пока не нашел своего ответа, поэтому я публикую это.

Я работаю с библиотекой D3, в частности с форс-макетом. Вместо того, чтобы добавлять предварительно определенные формы к узлам, я создаю свои собственные формы, такие как круги, контуры и так далее.

var shapes = {
        star : "m 0 0 l 23 12 l -4 -26 l 19 -19 l -27 -4 l -11 -23 l -12 23 l -27 4 l 19 19 l -4 26 l 24 -12",
        rect : "M 0 0 L 0 "+ rect_size + "L "+ 2 * rect_size + " "+ rect_size + " L "+ 2 * rect_size + " 0 L 0 0",
        vertical_rect : "M 0 0 L 0 "+ 2 * rect_size + "L "+ rect_size + " "+ 2 * rect_size + " L "+ rect_size + " 0 L 0 0",
        circle: "M 0 0 A "+ radius + " " + radius +" 0 1 0 0.00001 0 Z"
        };
var dummy_nodes = {};
var dummy_shapes = {"A" : shapes.circle, "B" : shapes.rect, "C" : shapes.rect, "D" : shapes.circle};

    // Compute the distinct nodes from the links.
links.forEach(function (link) {
        link.source = dummy_nodes[link.source] || (dummy_nodes[link.source] = 
                                                    { name: link.source, shape: dummy_shapes[link.source]});
        link.target = dummy_nodes[link.target] || (dummy_nodes[link.target] = 
                                                    { name: link.target,shape: dummy_shapes[link.target]});
    });
var force = d3.layout.force()
        .nodes(d3.values(dummy_nodes))
        .links(links)
        .size([960, 500])
        .linkDistance(200)
        .charge(-1500)
        .on("tick", tick)
        .start();
var svg = d3.select("body").append("svg:svg")
        .attr("width", w)
        .attr("height", h);
var node = svg.append("svg:g").selectAll(".node")
        .data(force.nodes())
        .enter().append("path")
        .attr("class", "node")
        .attr("d", function(n){ return n.shape})
        .on("dblclick", dblclick)
        .call(drag);

Вы можете просмотреть весь код здесь

Я не понимаю, как я могу изменить положение, при котором ссылки (или ребра) графа входят в каждый узел.

Например: я хотел бы, чтобы ребра выходили из узлов прямоугольника, где они расположены в центре прямоугольника, а не в верхнем левом углу (я полагаю, это позиция 0,0). У меня сейчас должно быть что-то, связанное с CX и CY каждой фигуры из SVG, но это мне не по карману.

Я надеюсь, что мой вопрос ясен, не стесняйтесь спрашивать все, что я мог бы опустить

Спасибо!

Answer 1

Просто сделайте центр вашей фигуры источником, т.е. вместо определения прямоугольника как

   rect : "M 0 0 L 0 "+ rect_size + "L "+ 2 * rect_size + " "+ rect_size + " L "+ 2 * rect_size + " 0 L 0 0",

определить это как

   rect : "M " + -rect_size + " " + (-rect_size / 2) + " h " + 2 * rect_size + " v " + rect_size + " h "+ (-2 * rect_size) + " z",

Я поменялся местами с L на h, v и z, так что это проще. Вы можете сделать то же самое с другими формами.