从地图返回值 [英] Return values from a map

问题描述

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

I have a script that originated in D3 V3 and I'm trying to rebuild it in V5.

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

I'll go through the code and then the problem. This is the relevant part of code.

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.

The problem is that the x and y fields show up as NaN.

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

I've added console.log statements before the return clause and the init_x and init_y values print out the right numbers.

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

I've tested the x() and y() functions with all the valid inputs and they return the right values. I've tested Math.random() which appears to work just fine.

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

None of the other fields show up as NaN which leads me to believe that the syntax for returning multiple values is right. I've also tried wrapping init_x and init_y in Number().

推荐答案

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

Unfortunately your code is full of errors, to the point that we cannot make it run without a major refactor.

但是，仅回答您当前的特定问题("NaN来自何处?" )，这就是问题所在( pasteBin ):

However, just to answer your current specific question ("where are the NaNs coming from?"), this is the problem (line 212 in your pasteBin):

var k = 0.03 * this.alpha;

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

Since there is no alpha, but alpha() instead, when you use k (which is undefined) latter on...

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

...您会得到漂亮又漂亮的NaN.

... you get that nice and beautiful NaN.

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

I'd like to emphasise again that this change will not make your code work, you have a lot of other problems to fix.

这篇关于从地图返回值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！