javascript - 获取 D3 中复杂数据结构的范围

Question

我正在尝试获取具有这种嵌套形式的 xy 数据的范围:

data = [
        {"points": [{"x": 0, "y": 0}, {"x": -5, "y": 100}, {"x": 300, "y": 1}, ...],
         "rgbval": "rgb(0, 0, 0)"
        },
        {"points": [{"x": 1, "y": 2}, {"x": -7000, "y": 2}, {"x": 0, "y": 0}, ...],
         "rgbval": "rgb(255, 0, 0)"
        }, 
         .
         .
         .
       ]

对于此示例数据，我要查找的值是:

x_domain = [-7000, 300]
y_domain = [0, 100]

我可以使用以下方法获取特定点组的范围:

for i in [0...data.length]
    console.log(d3.extent(data[i].points, (d) -> d.x))  # x_domain of i_th group of points
    console.log(d3.extent(data[i].points, (d) -> d.y))  # y_domain of i_th group of points

在示例情况下，这会给我两个 x_domains 和两个 y_domains。我想要整体 xy 数据的域。

Answer 1

首先，使用 d3.merge 合并数组(这几乎是一个奇特的 concat):

var merged = d3.merge(data.map(function(d){ return d.points}));

然后，按照正常方式获取范围:

var xExtent = d3.extent(merged, function(d){ return d.x});
var yExtent = d3.extent(merged, function(d){ return d.y});

这是演示:

var data = [{
  "points": [{
    "x": 0,
    "y": 0
  }, {
    "x": -5,
    "y": 100
  }, {
    "x": 300,
    "y": 1
  }],
  "rgbval": "rgb(0, 0, 0)"
}, {
  "points": [{
    "x": 1,
    "y": 2
  }, {
    "x": -7000,
    "y": 2
  }, {
    "x": 0,
    "y": 0
  }],
  "rgbval": "rgb(255, 0, 0)"
}];

var merged = d3.merge(data.map(function(d) {
  return d.points
}));

var xExtent = d3.extent(merged, function(d) {
  return d.x
});
var yExtent = d3.extent(merged, function(d) {
  return d.y
});

console.log("x extent: " + xExtent);
console.log("y extent: " + yExtent);

<script src="https://d3js.org/d3.v4.min.js"></script>

PS:不要将这个不常见的 d3.merge 误认为是更有名的 selection.merge。