D3: la Substitution de d3.svg.diagonale() avec d3.svg.ligne()

J'ai mis en œuvre le graphique suivant avec les bords rendu avec d3.svg.diagonale(). Cependant, quand j'ai essayer de substituer la diagonale avec d3.svg.ligne(), il n'apparaît pas à tirer sur la cible et la source de données. Ce qui me manque? Est-il quelque chose que je ne comprends pas à propos de d3.svg.ligne?

D3: la Substitution de d3.svg.diagonale() avec d3.svg.ligne()

Voici le code que j'ai fais référence, suivi par le code complet:

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'ensemble du code:

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; })
});

Une comparaison de la façon dont le d attribut de l'svg disparaît lors de l'utilisation de "ligne".
D3: la Substitution de d3.svg.diagonale() avec d3.svg.ligne()
D3: la Substitution de d3.svg.diagonale() avec d3.svg.ligne()

Vous ne semblez pas être en utilisant line n'importe où dans le code. Le d attribut de chemin est encore défini à l'aide de d3.svg.diagonal.
Oui, mais quand je mets "ligne" pour "d3.svg.diagonale()"0, il brise la vis. Ne peut pas comprendre pourquoi.
Comment est-il casser?
Le d de l'attribut de l'svg disparaît. Je vais télécharger une comparaison ci-dessus.
Avez-vous essayé juste d3.svg.line() sans la coutume des accesseurs pour x et y?

OriginalL'auteur Jakub Svec | 2013-04-17

  1. 22

    Question est assez daté, mais comme je n'ai pas de réponse et que quelqu'un pourrait faire face à un même problème, c'est ici.

    La raison pour laquelle le simple remplacement de diagonale avec ligne n'est pas le travail, c'est parce que d3.svg.ligne et d3.svg.diagonale retour des résultats différents:

    • d3.svg.diagonale retourne fonction qui accepte le système de référence et de son index et le transforme en chemin à l'aide de projection. En d'autres termes diagonale.projection détermine la façon dont la fonction sera d'obtenir des points de coordonnées fournies datum.
    • d3.svg.ligne les retours de fonction qui accepte un tableau de points de la ligne et le transforme en chemin. Méthodes ligne.x et ligne.y de déterminer comment les coordonnées du point récupérées à partir de l'élément de matrice de

    D3 SVG-Formes de référence

    SVG Chemins et D3.js

    De sorte que vous ne pouvez pas utiliser le résultat de la d3.svg.ligne directement dans d3 sélections (au moins quand vous voulez dessiner plusieurs lignes).

    Vous avez besoin d'envelopper dans une autre fonction comme ceci:

    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");

    Ici de la version de travail de jsFiddle mobeets posté le: jsFiddle

    Je pense que .attr("d", function (d) { return line([ {lx: d.target.x, ly: d.target.y},{lx: d.source.x, ly: d.source.y} ]); }); est une meilleure façon de le faire au lieu de les envelopper line() dans une fonction globale.
    Des points supplémentaires pour la fourniture d'une baisse-dans le remplacement pour diagonal dans ce contexte, insaisissable-code, plutôt que de fournir une solution de rechange. C'est plus d'un an et demi plus tard, et comme vous l'avez dit, "quelqu'un pourrait faire face à un même problème" (moi). Je n'avais pas trouvé cette solution dans une telle forme simple n'importe où ailleurs, et il ya certainement un certain nombre de gens qui veulent un jour.

    OriginalL'auteur elusive-code

  2. 2

    Peut-être de l'encapsulation de la diagonale de la fonction et de l'édition de ses paramètres pourrait travailler pour vous:

    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");

    OriginalL'auteur natanael

  3. 2

    J'ai eu le même problème...Il y a un jsFiddle ici.

    Notez que la modification de line à diagonal le font fonctionner.

    Ma suggestion serait de poster le code de jsFiddle ici car il n'est pas toujours fiable. Ensuite, la réponse spécifique sera disponible dans cette réponse, sans avoir à passer par un site extérieur.
    Vous avez à passer l'entrée correcte pour line(). Vous pouvez faire cette écharpe line() sur une autre fonction, comme le recommande @insaisissable code ou d'un retour à line() l'entrée correcte des valeurs comme vous pouvez le voir sur mon mod de votre violon.

    OriginalL'auteur mobeets

  4. 1

    Il suffit de régler le d attribut de lien à la ligne: 

    .attr("d", line)
    Oui, mais quand je mets "ligne" pour "d3.svg.diagonale()"0, il brise la vis.
    Pouvez-vous créer un petit exemple sur jsFiddle?
    J'ai essayé, mais le code source avec le ballon à la mise en page est sur github et il ne semble pas à l'accepter.

    OriginalL'auteur Christopher Chiche