Как заставить задачу сельдерея провалиться изнутри задачи?

Чтобы нарисовать маркеры в средней точке ваших ссылок, вы можете использовать marker-mid , который очень похож на marker-start и marker-end, за исключением того, что он вставляет элемент маркера в середине.

path.enter().append('svg:path')
            .style('marker-mid', function (d) { return 'url(#start-arrow)'; })

Для демонстрационных целей я только что использовал здесь start-arrow, что, конечно же, можно настроить по своему усмотрению.

Однако маркер будет нарисован только, если является вершиной в средней точке. Это неверно для вашего кода, потому что вы рисуете одну прямую линию от источника до цели, определяя только начальную и конечную точки. С другой стороны, наличие прямой линии пригодится, потому что довольно легко вычислить среднюю точку и разделить прямую линию на два сегмента, тем самым вставив новую вершину посередине. В вашем обработчике tick() уже есть вычисления, дающие промежуточные результаты, чтобы помочь найти среднюю точку:

// Coordinates of mid point on line to add new vertex.
midX = (targetX - sourceX) / 2 + sourceX;   
midY = (targetY - sourceY) / 2 + sourceY;

//                                    | v --- new vertex --- v |               
return 'M' + sourceX + ',' + sourceY + 'L' + midX + ',' + midY + 'L' + targetX + ',' + targetY;

Посмотрите следующий фрагмент кода для рабочей демонстрации.




  
    
      
  

  
      
      
  

30
задан Meilo 10 November 2014 в 14:11
поделиться