为什么域名在D3中不使用D3(数据)?

I'm new to D3 and playing around with a scatterplot. I cannot get d3.max(data) to work correctly in setting up domain!

我是D3的新手，玩着散点游戏。我无法得到d3.max(数据)在设置域中正确工作!

I have the following setting up a random dataset:

我有以下设置一个随机数据集:

var data = [];
      for (i=0; i < 40; i++){
            data.push({"x": i/40, "y": i/8, "a": Math.floor(Math.random() * 3), "x2": Math.random()});
        }

And then the following to set my coordinates:

然后下面来设置我的坐标:

 var x = d3.scale.linear().domain([0, 1]).range([0 + margin, w-margin]),
            y = d3.scale.linear().domain([0, d3.max(data)]).range([0 + margin, h-margin]),
            c = d3.scale.linear().domain([0, 3]).range(["hsl(100,50%,50%)", "rgb(350, 50%, 50%)"]).interpolate(d3.interpolateHsl);

This puts all 40 points in a single, horizontal line. If I replace d3.max(data) with '5' then it is a diagonal (albeit from the upper left to the bottom right, I'm still struggling to flip y-coordinates). Why isn't d3.max(data) working as expected?

这使得所有40个点都在一条水平线上。如果我用'5'替换d3.max(数据)，那么它就是一个对角线(尽管从左上到右下方，我仍然在努力翻转y坐标)。为什么d3.max(数据)不像预期的那样工作?

3 个解决方案

#1

d3.max() expects an array of numbers, not of objects. The elements of data have an internal key-value structure and there is no way for d3.max() to know what to take the maximum of. You can use something like jQuery's $.map to get the elements of the objects you want and then take the max, e.g.

max()期望的是一组数字，而不是对象。数据元素有一个内部键值结构，d3.max()没有办法知道要取最大值。你可以使用jQuery的$。映射来获取你想要的对象的元素，然后取最大值。

var maxy = d3.max($.map(data, function(d) { return d.y; }));

Edit:

编辑:

As pointed out in the comment below, you don't even need JQuery for this, as .map() is a native Array method. The code then becomes simply

正如下面的注释所指出的，您甚至不需要JQuery，因为.map()是一个本机数组方法。代码就变得简单了。

var maxy = d3.max(data.map(function(d) { return d.y; }));

or even simpler (and for those browsers that don't implement Array.map()), using the optional second argument of d3.max that tells it how to access values within the array

或者更简单(对于那些没有实现Array.map()的浏览器，使用d3的可选第二个参数。max告诉它如何访问数组中的值。

var maxy = d3.max(data, function(d) { return d.y; });

#2

d3.max API documentation can be found here.

d3。可以在这里找到max API文档。

# d3.max(array[, accessor])

# d3。max(array[访问器])

Returns the maximum value in the given array using natural order. If the array is empty, returns undefined. An optional accessor function may be specified, which is equivalent to calling array.map(accessor) before computing the maximum value. Unlike the built-in Math.max, this method ignores undefined values; this is useful for computing the domain of a scale while only considering the defined region of the data. In addition, elements are compared using natural order rather than numeric order. For example, the maximum of ["20", "3"] is "3", while the maximum of [20, 3] is 20.

使用自然顺序返回给定数组中的最大值。如果数组为空，则返回未定义的返回值。可以指定一个可选的访问器函数，这相当于在计算最大值之前调用array.map(访问器)。与内置的数学。该方法忽略未定义的值;这对于计算范围的领域非常有用，而只考虑数据的定义区域。此外，还比较了使用自然顺序而不是数字顺序的元素。例如，["20"，"3"]的最大值为"3"，而[20,3]的最大值为20。

Applying this information to the original question we get:

将此信息应用于我们得到的原始问题:

function accessor(o){
    return o.y;
}
var y = d3.scale.linear()
        .domain([0, d3.max(data, accessor)])
        .range([0 + margin, h-margin]);

If you end up using many accessor functions you can just make a factory.

如果最终使用许多访问函数，您可以创建一个工厂。

function accessor(key) {
    return function (o) {
        return o[key];
    };
}
var x = d3.scale.linear()
        .domain([0, d3.max(data, accessor('x'))])
        .range([...]),
    y = d3.scale.linear()
        .domain([0, d3.max(data, accessor('y'))])
        .range([...]);

#3

I was having a similar issue dealing with an associative array. My data looked like the following: [{"year_decided":1982,"total":0},{"year_decided":"1983","Total":"847"},...}]

我有一个类似的问题处理关联数组。我的数据如下:[{“year_decided”:1982，“total”:0}，{“year_decided”:“1983”，“total”:“847”}，…}

Simply passing parseInt before returning the value worked.

只是在返回值之前传递parseInt。

var yScale = d3.scale.linear()
    .domain([0, d3.max(query,function(d){ return parseInt(d["Total"]); }) ])
    .range([0,h]);

#1

var maxy = d3.max($.map(data, function(d) { return d.y; }));