D3: Подставляя d3.svg.diagonal() с d3.svg.line()

Question

Я выполнил следующий график с ребрами, обработанными d3.svg.diagonal(). Тем не менее, когда я пытаюсь заменить диагональ на d3.svg.line(), она, похоже, не тянет данные цели и источника. Что мне не хватает? Я что-то не понимаю о d3.svg.line?

Ниже приведен код, который я имею в виду, а затем полный код:

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

Весь код:

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

Сравнение того, как атрибут d svg исчезает при использовании «строки».

Answer 1

Просто установите атрибут ссылки d на линии:

.attr("d", line) 

Answer 2

У меня была такая же проблема ... Там в jsFiddle here.

Обратите внимание, что смена line на diagonal заставит его работать.

Answer 3

Возможно герметизирующего диагональную функцию и редактирования его параметров может работать для вас:

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

Вопрос довольно устаревшей, но так как я не вижу ответа, и кто-то может столкнуться с той же проблемой, здесь ,

Причина простая замена диагонального с линии не работает, потому что d3.svg.line и d3.svg.diagonal различных результатов:

• d3. svg.diagonal возвращает функцию, которая принимает значение и его индекс и преобразует его в путь с использованием проекции. Другими словами diagonal.projection определяет, как функция получит координаты точек из предоставленной базы данных.
• d3.svg.line возвращает функцию, которая принимает массив точек линии и преобразует ее в путь. Методы line.x и line.y определяют как координаты точки полученной из одного элемента массива прилагаемого

D3 SVG-Shapes reference

SVG Paths and D3.js

Таким образом, вы не можете использовать результат из d3.svg.line непосредственно в вариантах d3 (по крайней мере, когда вы хотите нарисовать несколько строк). mobeets разместил

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

Вот рабочая версия jsFiddle:: jsFiddle