Question

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

下面，我从job_small.csv中的line和对角线变量中读取数据。我在每个控制台中都放置了console.log步骤。

我注释掉最后两行代码以绘制对角线或直线。

当我绘制线条时，此脚本成功运行，并且控制台日志将打印出48,48,240,96,384,384。

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

我不知所措，无法理解对角变量中发生了什么，它说它无法像行变量那样读取数据对象。

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

Answer 1

与行生成器不同，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()
      .source(function(d) {
        var x = x_scale(d[0]['sx']);
        var y = x_scale(d[0]['sy']);
        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'])
        var p = {};
        p.x = x;
        p.y = y;
        return p;
      });

    var svg = d3.select("body").append("svg").attr("width", 600).attr("height", 600);
    var path = svg.append('path').attr('d', diagonal(data));

path {
  fill: none;
  stroke: black;
  stroke-width: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

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

1 个答案: