ti-enxame.com

Como usar a função diagonal D3 para desenhar linhas curvas?

Eu olhei para a amostra http://bl.ocks.org/mbostock/raw/4063570/ :

enter image description here

Produz linhas mescladas Nice do destino de origem da esquerda para a direita.

No meu caso, preciso fazer o layout dos nós manualmente e colocar as coordenadas x, y. Nesse caso, as linhas não são mescladas nos nós de origem. Aqui está o código de teste que reproduz esse problema:

var data = [ {name: "p1", children: [{name: "c1"}, {name: "c2"}, {name: "c3"}, {name: "c4"}]}];
var width = 400, height = 200, radius = 10, gap = 50;

// test layout
var nodes = [];
var links = [];
data.forEach(function(d, i) {
    d.x = width/4;
    d.y = height/2;
    nodes.Push(d);
    d.children.forEach(function(c, i) {
        c.x = 3*width/4;
        c.y = gap * (i +1) -2*radius;
        nodes.Push(c);
        links.Push({source: d, target: c});
    })
})

var color = d3.scale.category20();

var svg = d3.select("#chart").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g");
var diagonal = d3.svg.diagonal()
        .projection(function(d) { return [d.x, d.y]; });

var link = svg.selectAll(".link")
        .data(links)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);

var circle = svg.selectAll(".circle")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class", "circle");

var el = circle.append("circle")
        .attr("cx", function(d) {return d.x})
        .attr("cy", function(d) {return d.y})
        .attr("r", radius)
        .style("fill", function(d) {return color(d.name)})
        .append("title").text(function(d) {return d.name});

Há uma amostra disso em http://jsfiddle.net/zmagdum/qsEbd/ :

enter image description here

No entanto, parece que o comportamento das curvas próximas aos nós é oposto ao desejado. Eu gostaria que eles começassem horizontalmente nos nós e fizessem uma curva no meio. Existe um truque para fazer isso?

19
John Smith

Esta solução é baseada na excelente solução @bmdhacks, no entanto, acredito que a minha é um pouco melhor, pois não exige a troca de x e y nos próprios dados.

A idéia é que você possa usar diagonal.source() e diagonal.target() para trocar x e y:

var diagonal = d3.svg.diagonal()
    .source(function(d) { return {"x":d.source.y, "y":d.source.x}; })            
    .target(function(d) { return {"x":d.target.y, "y":d.target.x}; })
    .projection(function(d) { return [d.y, d.x]; });

Todos x y swapping agora está encapsulado no código acima.

O resultado:

enter image description here

Aqui também está jsfiddle .

26
VividD

Observe que no exemplo de blocos, os valores x e y são trocados nos links. Isso normalmente desenharia os links no lugar errado, mas ele também forneceu uma função de projeção que os troca de volta.

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

Aqui está o seu jsfiddle com esta técnica aplicada: http://jsfiddle.net/bmdhacks/qsEbd/5/

8
bmdhacks