стрелка в конце узла ссылки d3.js - PullRequest
Новая
       14

стрелка в конце узла ссылки d3.js

0 голосов
/ 14 июня 2019

Я нахожусь в процессе построения дерева и уже сделал некоторую структуру: enter image description here

Код моей ссылки выглядит следующим образом: 

   const links = d3
        .select('svg g.links')
        .selectAll('line.link')
        .data(root.links())
        .enter();

    links
        .append('path')
        .classed('link', true)
        .attr('d', this.buildCurvedNodesJointLine);

    buildCurvedNodesJointLine(d) {
     if (d.target.data.noParent) {
         return 'M0,0L0,0';
     }

     const ny = d.target.y + (d.source.y - d.target.y) * 0.5;

     const linedata: any = [
         {
            x: d.target.x,
            y: d.target.y
         },
         {
            x: d.target.x,
            y: ny
         },
         {
            x: d.source.x,
            y: d.source.y
         }
     ];

     const fun = d3
        .line()
        .x((data1: any) => data1.x)
        .y((data2: any) => data2.y)
        .curve(d3.curveStepAfter);

     return fun(linedata);

buildCurvedNodesJointLine функция построения изогнутых ссылок для моих узлов. Но я не могу добавить стрелку направления в конце строки ссылок. Так это может выглядеть так: enter image description here

1 Ответ

0 голосов
/ 15 июня 2019

Посмотрите на атрибут маркера-конца, который автоматически добавит определенный маркер, а также сориентирует его в правильном направлении, если маркер имеет атрибут orient, установленный как автоматический. 

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin: 0;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 300)
      .attr("height", 100);

    svg.append('defs').append('marker')
      .attr('id', 'arrow')
      .attr('viewBox', '0 0 10 6')
      .attr('refX', 10)
      .attr('refY', 3)
      .attr('markerWidth', 10)
      .attr('markerHeight', 6)
      .attr('markerUnits', 'userSpaceOnUse')
      .attr('orient', 'auto')
      .append('path')
      .attr('d', 'M 0 0 L 10 3 L 0 6 Z');

    svg.append('g')
      .attr('transform', 'translate(10,10)')
      .selectAll('path')
      .data(d3.range(4))
      .enter()
      .append('path')
      .style('stroke', 'black')
      .style('fill', 'none')
      .attr('marker-end', 'url(#arrow)')
      .attr('d', function(d, i) {
        return 'M 0 0 L 50 ' + i * 20;
      })
  </script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...