d3.j смешивание радиального дерева со ссылочным (прямым) деревом - PullRequest
Новая
       10

d3.j смешивание радиального дерева со ссылочным (прямым) деревом

1 голос
/ 25 сентября 2019

В связи с этим примером ( узел радиального дерева d3.j связывает различные размеры ), мне было интересно, возможно ли смешивать радиальные деревья и прямые деревья в d3.js.

Для моего jsFiddle примера: https://jsfiddle.net/j0kaso/fow6xbdL/ Я бы хотел, чтобы родитель (level0) имел прямую линию к первому дочернему элементу (level1), а затем к радиальному изогнутому дереву (как оно есть)прямо сейчас).

Возможно ли это?

Я не смог найти ничего, связанного с этим, но, поскольку я относительно новичок в d3.js / JS, возможно, я просто пропустил правильные ключевые слова.Надеюсь, у кого-нибудь есть рабочий пример или он может указать мне верное направление - в любом случае, я ценю любые советы и комментарии!

1 Ответ

1 голос
/ 26 сентября 2019

Если глубина источника ссылки равна 0, тогда вы можете сгенерировать SVG-путь из источника и цели x и y ссылки, аналогично тому, как позиции узла вычисляются с помощью тригонометрии, где x - угол поворота, а y - радиус. 

    //create the linkRadial function for use later in the 'd' generation
    const radialPath = d3.linkRadial()
     .angle(l => l.x)
     .radius(l => l.y)

    const link = svg.append("g")
     .attr("fill", "none")
     .attr("stroke-opacity", 0.4)
     .attr("stroke-width", 1.5)
     .selectAll("path")
     .data(root.links())
     .enter()
     .append("path")

    link.attr("d", function(d){

            let adjust = 1.5708 //90 degrees in radians

            // calculate the start and end points of the path, using trig
            let sourceX = (d.source.y * Math.cos(d.source.x - adjust)); 
            let sourceY = (d.source.y * Math.sin(d.source.x - adjust)); 
            let targetX = (d.target.y * Math.cos(d.target.x - adjust)); 
            let targetY = (d.target.y * Math.sin(d.target.x -adjust)); 


            // if the source node is at the centre, depth = 0, then create a straight path using the L (lineto) SVG path. Else, use the radial path
            if (d.source.depth==0){
              return "M" + sourceX + " " + sourceY + " "
                + "L" + targetX + " " + targetY 
            } else {
              return radialPath(d)
            }

    })
...