svg - Получить стрелки, чтобы указывать на внешний край узла в D3




d3.js (2)

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

Затем я добавил поле «радиус» в мои узлы. Я просто сделал это, когда я установил атрибут radius, добавив его в качестве фактического поля вместо немедленного возврата значения:

var circle = svg.append("svg:g").selectAll("circle")
                    .data(force.nodes())
                    .enter().append("svg:circle")
                    .attr("r", function(d) {
                        if (d.logic != null) {
                            d.radius = 5;
                        } else {
                            d.radius = node_scale(d.classSize);
                        }
                        return d.radius;

Затем я отредактировал свою функцию tick (), чтобы учесть этот радиус. Это потребовало немного простой геометрии ...

function tick(e) {

        path.attr("d", function(d) {
            // Total difference in x and y from source to target
            diffX = d.target.x - d.source.x;
            diffY = d.target.y - d.source.y;

            // Length of path from center of source node to center of target node
            pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));

            // x and y distances from center to outside edge of target node
            offsetX = (diffX * d.target.radius) / pathLength;
            offsetY = (diffY * d.target.radius) / pathLength;

            return "M" + d.source.x + "," + d.source.y + "L" + (d.target.x - offsetX) + "," + (d.target.y - offsetY);
        });

По сути, треугольник, образованный путем, его полное изменение x (diffX) и его полное изменение y (diffY) - это треугольник, подобный тому, который образован сегментом пути внутри целевого узла (то есть радиуса узла), x изменяется внутри целевого узла (offsetX), а y изменяется внутри целевого узла (offsetY). Это означает, что отношение радиуса целевого узла к общей длине пути равно отношению offsetX к diffX и отношению offsetY к diffY.

Я также изменил значение refX на 10 для стрелок. Я не уверен, почему это было необходимо, но теперь это похоже на работу!

Я новичок в D3 и пытаюсь создать интерактивную визуализацию сети. Я скопировал большие части this примера, но я изменил кривые линии на прямые, используя SVG «линии», а не «пути», и я также масштабировал узлы в соответствии с данными, которые они представляют. Проблема в том, что мои стрелки (созданные с помощью маркеров SVG) находятся на концах линий. Поскольку некоторые узлы большие, стрелки скрываются за ними. Я бы хотел, чтобы мои стрелки появлялись прямо на внешнем крае узла, на который они указывают.

Вот как я создаю маркеры и ссылки:

svg.append("svg:defs").selectAll("marker")
    .data(["prereq", "coreq"])
    .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

var link = svg.selectAll(".link")
    .data(force.links())
    .enter().append("line")
    .attr("class", "link")
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

Я заметил, что атрибут «refX» указывает, как далеко от конца линии должна отображаться стрелка. Как я могу сделать это зависимым от радиуса узла, на который он указывает? Если я не могу этого сделать, могу ли я вместо этого изменить конечные точки самих линий? Я предполагаю, что я сделал бы это в этой функции, которая сбрасывает конечные точки линий, когда все движется:

function tick() {
        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; });

        circle.attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });

        text.attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });
    }

Какой подход имеет больше смысла, и как бы я его реализовал?


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







d3.js