Как избежать наложения маркера и узла в cola.js / d3.js - PullRequest
Новая
       95

Как избежать наложения маркера и узла в cola.js / d3.js

0 голосов
/ 21 сентября 2018

я работаю над примером cola.js введите описание ссылки здесь

и я добавил маркеры (стрелки) в конце ссылок.Однако, поскольку узлы имеют прямоугольную форму, они перекрывают стрелки.Я попытался исправить это, изменив 'refX' маркера, но выглядит не очень хорошо.

Код маркера: 

// define arrow markers for graph links
    svg.append('svg:defs').append('svg:marker')
    .attr('id', 'end-arrow')
        .attr('viewBox', '0 -5 10 10')
        .attr('refX', 30)
        //.attr("refY", -1.5)
        .attr('markerWidth', 6)
        .attr('markerHeight', 6)
        .attr('orient', 'auto')
        .append('svg:path')
        .attr('d', 'M0,-5L10,0L0,5')
        .attr('fill', '#000');

и затем добавьте его в конец ссылки:

`cola.on (" tick ", function (){

        link.attr("x1", function (d) { return d.source.x; })
            .attr("y1", function (d) { return d.source.y; })
            .attr("x2", function (d) { return d.target.x; })
            .attr("y2", function (d) { return d.target.y; })
            .attr("marker-end","url(#end-arrow)");  
`

1 Ответ

0 голосов
/ 25 сентября 2018

Если я могу порекомендовать другой способ создания ваших ребер.

Следуя этому примеру здесь - отказ от ответственности, кажется, что действительный пример не работает из-за того, что я предполагаю, что это опечатка в коде,

Короче говоря.важная часть этого внутри вашего cola.on (функция "tick" () {

            link.each(function (d) {
            d.route = cola.makeEdgeBetween(d.source.innerBounds, d.target.innerBounds, 5);
        });

        link.attr("x1", d => d.route.sourceIntersection.x)
            .attr("y1", d => d.route.sourceIntersection.y)
            .attr("x2", d => d.route.arrowStart.x)
            .attr("y2", d => d.route.arrowStart.y);

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

...