Как получить пересечение link-edge и узла в d3 js? - PullRequest
Новая
       171

Как получить пересечение link-edge и узла в d3 js?

1 голос
/ 12 апреля 2020

Я хочу иметь много форм узлов (круг, квадрат ...) Вот мой JSfiddle прототип Проблема в расположении стрелок: enter image description here

Они созданы так в js: 

   svg.append('svg:defs').append('svg:marker')
     .attr('id', 'end-arrow')
     .attr('viewBox', '0 -5 10 10')
     .attr('refX', 6)
     .attr('markerWidth', 3)
     .attr('markerHeight', 3)
     .attr('orient', 'auto')
     .append('svg:path')
     .attr('d', 'M0,-5L10,0L0,5')
     .attr('fill', 'red');
//...
   var link = svg.selectAll(".link")
     .data(graph.links)
     .enter().append("line")
     .attr("class", "link");

и css: 

.link {
  stroke: #7a4e4e;
  stroke-width: 3px;
  stroke-opacity: 1;
  marker-end: url(#end-arrow);
}

Стрелки должны быть там, где я нарисовал зеленые отметки , но они в центре (красные метки). Они ориентированы правильно, но не на своем месте. Как сделать так, чтобы стрелки находились на пересечении края ссылки и узла в d3 js?

...