我用 d3.svg.diagonal() 渲染的边实现了下图。但是，当我尝试用 d3.svg.line() 替换对 Angular 线时，它似乎没有提取目标和源数据。我错过了什么？关于 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; })
});

使用“line”时 svg 的 d 属性如何消失的比较。

最佳答案

问题已经过时了，但由于我没有看到答案并且有人可能会遇到同样的问题，所以在这里。

用 line 简单替换 diagonal 不起作用的原因是 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 选择中直接使用 d3.svg.line 的结果(至少当您想要绘制多条线时)。

你需要像这样将它包装在另一个函数中:

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 mobeets 的工作版本:jsFiddle

关于javascript - D3 : Substituting d3. svg.diagonal() 和 d3.svg.line()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16070150/