javascript - 在内部数组中查找域值

Question

我有这样一个数据集:

const dataset = [
      { 'color': 'red', 'data': [{ x: 0, y: 600 }, { x: 2, y: 900 }, { x: 4, y: 650 }, { x: 6, y: 700 }, { x: 9, y: 600 }] },
      { 'color': 'blue', 'data': [{ x: 0, y: 400 }, { x: 2, y: 300 }, { x: 4, y: 450 }, { x: 6, y: 900 }, { x: 9, y: 400 }] },
      { 'color': 'yellow', 'data': [{ x: 0, y: 200 }, { x: 2, y: 100 }, { x: 4, y: 550 }, { x: 6, y: 600 }, { x: 9, y: 400 }] }
    ];

我想找到最大和最小 x 轴的域值。我尝试了这段代码，但它不起作用:

.domain([d3.min(arrangedata, (array) => array.x), d3.max(arrangedata, (array) => array.x)])

我也试过 d3.extend，但我无法处理它。有什么想法吗？

Answer 1

要使用d3.max/min 或d3.extent，您必须合并内部数组，您可以使用Array.prototype.reduce 来完成。 .然后，在访问器中指定 x 属性。

总而言之，就是这样:

const extent = d3.extent(dataset.reduce((a, c) => a.concat(c.data), []), d => d.x);

这是演示:

const dataset = [{
    'color': 'red',
    'data': [{
      x: 0,
      y: 600
    }, {
      x: 2,
      y: 900
    }, {
      x: 4,
      y: 650
    }, {
      x: 6,
      y: 700
    }, {
      x: 9,
      y: 600
    }]
  },
  {
    'color': 'blue',
    'data': [{
      x: 0,
      y: 400
    }, {
      x: 2,
      y: 300
    }, {
      x: 4,
      y: 450
    }, {
      x: 6,
      y: 900
    }, {
      x: 9,
      y: 400
    }]
  },
  {
    'color': 'yellow',
    'data': [{
      x: 0,
      y: 200
    }, {
      x: 2,
      y: 100
    }, {
      x: 4,
      y: 550
    }, {
      x: 6,
      y: 600
    }, {
      x: 9,
      y: 400
    }]
  }
];

const extent = d3.extent(dataset.reduce((a, c) => a.concat(c.data), []), d => d.x);

console.log(extent)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>