4

我正在尝试获取具有这种嵌套形式的 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 数据的域。

4

1 回答 1

4

首先，使用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。

于 2017-07-12T16:04:07.753 回答