D3: Sostituzione di d3.svg.diagonal() con d3.svg.line()

Question

Ho implementato il seguente grafico con i bordi resi con d3.svg.diagonal(). Tuttavia, quando provo a sostituire la diagonale con d3.svg.line(), non sembra che estragga i dati di destinazione e di origine. Cosa mi manca? C'è qualcosa che non capisco su d3.svg.line?

Quello che segue è il codice mi riferisco a, seguito dal codice completo:

var line = d3.svg.line() 
    .x(function(d) { return d.lx; }) 
    .y(function(d) { return d.ly; }); 

...

var link= svg.selectAll("path") 
    .data(links) 
    .enter().append("path") 
    .attr("d",d3.svg.diagonal()) 
    .attr("class", ".link") 
    .attr("stroke", "black") 
    .attr("stroke-width", "2px") 
    .attr("shape-rendering", "auto") 
    .attr("fill", "none"); 

L'intero codice:

var margin = {top: 20, right: 20, bottom: 20, left: 20}, 
    width =1500, 
    height = 1500, 
    diameter = Math.min(width, height), 
    radius = diameter/2; 


var balloon = d3.layout.balloon() 
    .size([width, height]) 
    .value(function(d) { return d.size; }) 
    .gap(50)     

var line = d3.svg.line() 
    .x(function(d) { return d.lx; }) 
    .y(function(d) { return d.ly; }); 


var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + (margin.left + radius) + "," + (margin.top + radius) + ")") 

    root = "flare.json"; 
    root.y0 = height/2; 
    root.x0 = width/2; 

d3.json("flare.json", function(root) { 
    var nodes = balloon.nodes(root), 
     links = balloon.links(nodes); 


var link= svg.selectAll("path") 
    .data(links) 
    .enter().append("path") 
    .attr("d",d3.svg.diagonal()) 
    .attr("class", ".link") 
    .attr("stroke", "black") 
    .attr("stroke-width", "2px") 
    .attr("shape-rendering", "auto") 
    .attr("fill", "none"); 

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

    node.append("circle") 
     .attr("r", function(d) { return d.r; }) 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 

    node.append("text") 
     .attr("dx", function(d) { return d.x }) 
     .attr("dy", function(d) { return d.y }) 
     .attr("font-size", "5px") 
     .attr("fill", "white") 
     .style("text-anchor", function(d) { return d.children ? "middle" : "middle"; }) 
     .text(function(d) { return d.name; }) 
}); 

Un confronto di come l'attributo d dello svg scompare quando si utilizza "line".

Answer 1

Basta impostare l'attributo d di collegamento alla linea:

.attr("d", line) 

Answer 2

Ho avuto lo stesso problema ... C'è un jsFiddle here.

Si noti che la modifica di line a diagonal lo farà funzionare.

Answer 3

Forse incapsulare la funzione di diagonale e la modifica dei suoi parametri potrebbe funzionare per voi:

var diagonal = d3.svg.diagonal(); 
var new_diagonal = function (obj, a, b) { 
    //Here you may change the reference a bit. 
    var nobj = { 
     source : { 
      x: obj.source.x, 
      y: obj.source.y 
     }, 
     target : { 
      x: obj.target.x, 
      y: obj.target.y 
     } 
    } 
    return diagonal.apply(this, [nobj, a, b]); 
} 
var link= svg.selectAll("path") 
    .data(links) 
    .enter().append("path") 
    .attr("d",new_diagonal) 
    .attr("class", ".link") 
    .attr("stroke", "black") 
    .attr("stroke-width", "2px") 
    .attr("shape-rendering", "auto") 
    .attr("fill", "none"); 

Answer 4

domanda è piuttosto datato, ma dal momento che non vedo una risposta e qualcuno potrebbe trovarsi ad affrontare lo stesso problema, qui è .

Il motivo semplice sostituzione di diagonale con linea non funziona è perché d3.svg.line e d3.svg.diagonal ritorno diversi risultati:

• d3. svg.diagonal restituisce la funzione che accetta il dato e il relativo indice e lo trasforma in percorso utilizzando la proiezione . In altre parole, diagonal.projection determina come la funzione otterrà le coordinate dei punti dal dato fornito.
• d3.svg.line restituisce una funzione che accetta una serie di punti della linea e la trasforma in percorso. Metodi line.x e line.y determinano come coordinate del punto recuperato i dal singolo elemento dell'array in dotazione

D3 SVG-Shapes reference

SVG Paths and D3.js

Quindi non è possibile utilizzare risultato della d3.svg.linea direttamente nelle selezioni d3 (almeno quando si desidera disegnare più righe).

È necessario avvolgerlo in un'altra funzione come questa:

var line = d3.svg.line() 
       .x(function(point) { return point.lx; }) 
       .y(function(point) { return point.ly; }); 

function lineData(d){ 
    // i'm assuming here that supplied datum 
    // is a link between 'source' and 'target' 
    var points = [ 
     {lx: d.source.x, ly: d.source.y}, 
     {lx: d.target.x, ly: d.target.y} 
    ]; 
    return line(points); 
} 

// usage: 
var link= svg.selectAll("path") 
    .data(links) 
    .enter().append("path") 
    .attr("d",lineData) 
    .attr("class", ".link") 
    .attr("stroke", "black") 
    .attr("stroke-width", "2px") 
    .attr("shape-rendering", "auto") 
    .attr("fill", "none"); 

Ecco la versione di jsFiddle lavorare mobeets Inviato: jsFiddle