Question

我有一个源于D3 V3的脚本，我正试图在V5中重建它。

我将遍历代码，然后讨论问题。这是代码的相关部分。

var height = 570
var width = 510

var svg = d3.select("#chart").append("svg")
    .attr("width", width + 160)
    .attr("height", height + 90)
    .append("g")
    .attr("transform", "translate(" + 160 + "," + 90 + ")");

// this has a count for how many are in each group
var grpcnts = {
    met: { '1960': 0, '1970': 0, '2010': 0, label: "First Met", x: 1, y: 1 },
    romantic: { '1960': 0, '1970': 0, '2010': 0, label: "Romantic", x: 2, y: 1 },
    lived: { '1960': 0, '1970': 0, '2010': 0, label: "Live Together", x: 3, y: 1 },
    married: { '1960': 0, '1970': 0, '2010': 0, label: "Married", x: 4, y: 3 },
}

var x = d3.scaleBand()
    .domain([1950, 1970, 1980, 2010])
    .range([0, width]);

var y = d3.scaleBand()
    .domain(d3.keys(grpcnts))
    .range([height, 0]);

var sched_objs = [],
    curr_index = -1;

// Load data 
d3.tsv("timelines.tsv")
    .then(function(data) {

    data.forEach(function(d) {
        var day_array = d.timeline.split(",");
        var activities = [];
        for (var i=0; i < day_array.length; i++) {
            // Duration
            if (i % 2 == 1) {
                activities.push({'act': day_array[i-1], 'duration': +day_array[i]});
            }
        }
        sched_objs.push(activities);
    });

    // A node for each person's schedule
    var nodes = sched_objs.map(function(o,i) {
          var act = o[0].act;
          var init_x = x(+data[i].decade) + Math.random();
          var init_y = y('met') + Math.random();
          var col = "#cccccc";
          grpcnts[act][data[i].decade] += 1;

        return {
      act: act,
      radius: maxRadius,
      x: init_x,
      y: init_y,
      decade: data[i].decade,
      color: color(act),
      married: false,
      moves: 0,
      next_move_time: o[0].duration,
      sched: o
        }
      });
    }) // end tsv

这是数据集的样本。

"decade"    "timeline"
1970    "met,4,romantic,14,lived,1,married,-99"
1970    "romantic,2,married,-99"
1970    "met,9,romantic,48,married,-99"
1970    "romantic,20,married,-99"
1970    "met,2,romantic,10,married,-99"
1970    "met,13,romantic,16,married,-99"

问题在于x和y字段显示为NaN。

我在return子句之前添加了console.log语句，并且init_x和init_y值显示正确的数字。

我已经用所有有效输入测试了x()和y()函数，它们返回正确的值。我已经测试过Math.random()，它似乎工作正常。

没有其他字段显示为NaN，这使我相信返回多个值的语法是正确的。我还尝试过将init_x和init_y包装在Number（）中。

Answer 1

不幸的是，您的代码中充满了错误，以至于在没有重大重构的情况下我们无法使其运行。

但是，仅回答您当前的特定问题（“ NaN来自何处？” ），这就是问题所在（{{3中的第212行}}）：

var k = 0.03 * this.alpha;

因为没有alpha，而是alpha()，所以当您在后面使用k（即undefined）时……

o.x += (x(+o.decade) - o.x) * k * damper;

...你会得到漂亮又漂亮的NaN。

我想再次强调，此更改将不能使您的代码正常工作，您还有很多其他问题需要解决。

从地图返回值

1 个答案: