D3.js d3.svg.diagonal如何读取数据？

我无法理解d3在读取对角线数据时的行为

下面，我从job_small.csv中读取直线变量和对角线变量中的数据。 我在每一步中都加入了console.log步骤

我注释掉最后两行代码中的任何一行，以绘制对角线或直线

当我运行绘制线时，该脚本成功运行，控制台日志打印出48,48240,96384384

当我运行绘制对角线时，此脚本失败。console.log步骤显示x和y的值为NaN

我无法理解对角线变量中发生了什么，它说它不能像直线变量那样读取数据对象

my job_small.csv中的数据为： sx、sy、tx、ty\n 1,1,5,5\n 5,2,7,6\n 8,8,17,14

d3.csv("/static/data/job_small.csv", function (data) {
var canvas = d3.select("body").append("svg").attr("width",600).attr("height",600);
var x_scale = d3.scale.linear().domain([0,20]).range([0, 960]);
var y_scale = d3.scale.linear().domain([0,20]).range([300, 0]);

var diagonal = d3.svg.diagonal()
    .source(    function (d) {
        var x=x_scale(d['sx']);
        var y=x_scale(d['sy']);
        var p={};
        p.x=x;
        p.y=y;
        console.log(x)  // When these print, they show Nan
        console.log(y)  // When these print, they show Nan
        return p;
    })
    .target(    function (d) {
        var x=x_scale(d['tx'])
        var y=x_scale(d['ty'])
        var p={};
        p.x=x;
        p.y=y;
        return p;
    });

var line = d3.svg.line()
    .x(function(d) { var x=x_scale(d['sx']);console.log(x); return x; })
    .y(function(d) { var y=x_scale(d['sy']);console.log(y); return y; });
// When I print console for this line var, I get 48,48,240,96,384,384

var path = canvas.append('path').attr('d', diagonal(data));  // Get error
var path = canvas.append('path').attr('d', line(data));   // This runs successfully
});

---

与line生成器不同，

d3.svg.diagonal

需要一个数据（而不是数据）作为参数

因此，您必须选择什么对象作为源，什么对象作为目标。例如，让我们将第一个作为源，第二个作为目标：

var diagonal = d3.svg.diagonal()
  .source(function(d) {
    var x = x_scale(d[0]['sx']);
    var y = x_scale(d[0]['sy']);
    //first object----^
    var p = {};
    p.x = x;
    p.y = y;
    return p;
  })
  .target(function(d) {
    var x = x_scale(d[1]['tx'])
    var y = x_scale(d[1]['ty'])
    //second object---^
    var p = {};
    p.x = x;
    p.y = y;
    return p;
  });

以下是工作演示：

var csv=`sx，sy，tx，ty
1,1,5,5
5,2,7,6
8,8,17,14`;
var data=d3.csv.parse（csv）；
var x_scale=d3.scale.linear（）.domain（[0,20]）.range（[0,960]）；
var y_scale=d3.scale.linear（）.domain（[0,20]）.range（[300,0]）；
var diagonal=d3.svg.diagonal（）
.来源（功能（d）{
var x=x_标度（d[0]['sx']）；
变量y=x_标度（d[0]['sy']）；
var p={}；
p、 x=x；
p、 y=y；
返回p；
})
.目标（功能（d）{
var x=x_标度（d[1]['tx']）
变量y=x_标度（d[1]['ty']）
var p={}；
p、 x=x；
p、 y=y；
返回p；
});
var svg=d3.select（“body”）.append（“svg”）.attr（“width”，600）.attr（“height”，600）；
var path=svg.append（'path'）.attr（'d'，对角线（数据））
路径{
填充：无；
笔画：黑色；
笔画宽度：2px；
}
命名SVG标记
canvas
非常令人困惑，因为有一个
canvas
标记，其行为与SVG非常不同。