D3切片数组,包含从到值

时间:2019-05-21 09:33:58

标签: d3.js

我有一个类似下面的数据集

const data = [
    {frequency: 600, letter: 0, luminous: 234},
    {frequency: 2456, letter: 13, luminous: 4000},
    {frequency: 1200, letter: 2, luminous: 1402},
    {frequency: 1400, letter: 3, luminous: 1500},
    {frequency: 1234, letter: 4, luminous: 1800},
    {frequency: 768, letter: 5, luminous: 1900},
    {frequency: 3456, letter: 9, luminous: 2300},
    {frequency: 4567, letter: 10, luminous: 670},
    {frequency: 600, letter: 6, luminous: 2233},
    {frequency: 350, letter: 7, luminous: 1450},
    {frequency: 2340, letter: 8, luminous: 1470},
    {frequency: 4200, letter: 11, luminous: 5600},
    {frequency: 3000, letter: 12, luminous: 4500},
    {frequency: 1200, letter: 14, luminous: 4200},
    {frequency: 1100, letter: 15, luminous: 3000},
    {frequency: 1700, letter: 16, luminous: 4500},
];

,我需要使用d3的from值和2值对该数组数据进行切片

const maxLetter = d3.max(data, d => d.letter);
const width = 400;
const scaleX = scaleLinear()
    .domain([0, maxLetter])
    .range([0, width])
    .clamp(true)

是否可以将我的data数组以开始的letter = 2到结束letter = 9进行切片,以此范围内的所有内容作为新数组?像下面的d3一样?

const newData = [
    {frequency: 1200, letter: 2, luminous: 1402},
    {frequency: 1400, letter: 3, luminous: 1500},
    {frequency: 1234, letter: 4, luminous: 1800},
    {frequency: 768, letter: 5, luminous: 1900},
    {frequency: 600, letter: 6, luminous: 2233},
    {frequency: 350, letter: 7, luminous: 1450},
    {frequency: 2340, letter: 8, luminous: 1470},
    {frequency: 3456, letter: 9, luminous: 2300}
];

2 个答案:

答案 0 :(得分:1)

为什么不使用简单的循环呢? 像这样:

var newData = [];
for(var i = 0; i < data.length; i++){
  if(data[i].letter >= 2 && data[i].letter < 10){
    newData.push(data[i]);
  }
}

要获得newData排序的letter数组,可以使用比较器: newData.sort((a, b) => a.letter - b.letter)

答案 1 :(得分:0)

要对数据执行操作, Crossfilter 是最佳解决方案。

  • 将数据馈入交叉过滤器
  • 根据键 [letter]
  • 创建尺寸
  • 使用 filterRange 过滤数据

const data = [
    {frequency: 600, letter: 0, luminous: 234},
    {frequency: 2456, letter: 13, luminous: 4000},
    {frequency: 1200, letter: 2, luminous: 1402},
    {frequency: 1400, letter: 3, luminous: 1500},
    {frequency: 1234, letter: 4, luminous: 1800},
    {frequency: 768, letter: 5, luminous: 1900},
    {frequency: 3456, letter: 9, luminous: 2300},
    {frequency: 4567, letter: 10, luminous: 670},
    {frequency: 600, letter: 6, luminous: 2233},
    {frequency: 350, letter: 7, luminous: 1450},
    {frequency: 2340, letter: 8, luminous: 1470},
    {frequency: 4200, letter: 11, luminous: 5600},
    {frequency: 3000, letter: 12, luminous: 4500},
    {frequency: 1200, letter: 14, luminous: 4200},
    {frequency: 1100, letter: 15, luminous: 3000},
    {frequency: 1700, letter: 16, luminous: 4500},
];

const CFX = crossfilter(data);
const dimension = CFX.dimension(function (d){ return d.letter; });

console.dir(dimension.top(Infinity).length);
dimension.filterRange([2, 10]);

console.dir(dimension.top(Infinity));
console.dir(dimension.top(Infinity).length);
<script src="http://dc-js.github.io/dc.js/js/crossfilter.js"></script>