D3：用d3.svg.line（）替换d3.svg.diagonal（） [英] D3: Substituting d3.svg.diagonal() with d3.svg.line()

问题描述

我已经实现了下面的图形与d3.svg.diagonal（）呈现的边缘。然而，当我尝试用d3.svg.line（）替换对角线，它似乎不拉动目标和源数据。我缺少什么？有什么我不明白的d3.svg.line吗？

I have implemented the following graph with the edges rendered with d3.svg.diagonal(). However, when I try substituting the diagonal with d3.svg.line(), it doesn't appear to pull the target and source data. What am I missing? Is there something I don't understand about d3.svg.line?

以下是我提到的代码，后面是完整代码：

The following is the code I am referring to, followed by the full code:

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属性如何消失的比较。

A comparison of how the d attribute of the svg disappears when using "line."

推荐答案

问题很陈旧，

简单替换 对角线的原因在于行不工作是因为 d3.svg.line 和 d3.svg.diagonal 返回不同的结果：

The reason why simple replacement of diagonal with line is not working is because d3.svg.line and d3.svg.diagonal return different results:

• d3.svg.diagonal 返回接受datum及其索引的函数，并使用投影将其转换为path。换句话说， diagonal.projection 决定函数如何从提供的数据获得点的坐标。


• d3.svg.line 返回函数接受线的点数组并将其转换为路径。方法 line.x 和 line.y 确定如何从提供的数组的单个元素中检索点的坐标

• d3.svg.diagonal returns function that accepts datum and its index and transforms it to path using projection. In other words diagonal.projection determines how the function will get points' coordinates from supplied datum.
• d3.svg.line returns function that accepts an array of points of the line and transforms it to path. Methods line.x and line.y determine how coordinates of the point retreived from the single element of supplied array

D3 SVG-Shapes参考

SVG路径和D3.js

因此，您不能直接在d3选择中使用 d3.svg.line 的结果（至少在要绘制多行时）。

So you can not use result of the d3.svg.line directly in d3 selections (at least when you want to draw multiple lines).

您需要将其包装在另一个函数中，如下所示：

You need to wrap it in another function like this:

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

Here's working version of jsFiddle mobeets posted: jsFiddle

这篇关于D3：用d3.svg.line（）替换d3.svg.diagonal（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！