d3.js,使用d3.extent查找嵌套json值的最小值/最大值

gso*_*sol 6 json d3.js

我正在d3中构建一个气泡图,我希望气泡的颜色基于本地json文件中的logFC值。

我的json文件如下所示:

{
   "name": "genes",
   "children": [    
     {
       "value": "9.57E-06",
       "logFC": "-5.51658163",
       "symbol": "BCHE",
     },
     {
       "value": "0.0227",
       "logFC": "3.17853632",
       "symbol": "GRIA2",
     },
     {
       "value": "0.00212",
       "logFC": "-2.8868275",
       "symbol": "GRIN2A",
     }   
   ]
}
Run Code Online (Sandbox Code Playgroud)

该文件不是平坦的,这就是为什么我认为在使用d3.extent引用叶节点时遇到问题。我知道我可以使用:

var color1 = d3.scale.linear()
        .domain([-5.51658163,3.17853632])   //manually putting in min/max into the domain
        .range(["lightgreen", "green"]);
Run Code Online (Sandbox Code Playgroud)

但是我的数据会发生变化,并使代码动态化-我尝试了以下方法以及许多其他变体:

var color1 = d3.scale.linear()
        .domain([d3.extent(d3.values(data, function(data) { return +d.logFC;}))])
        .range(["lightgreen", "green"]);
Run Code Online (Sandbox Code Playgroud)

基本上,我在叶节点上使用d3.extent有麻烦。有没有一种简单的方法可以使用d3.extent查找logFC的最小值和最大值?

谢谢!

(PS,如果括号中有任何问题,那是我将数据复制到问题框中时犯的一个错误)

当我查看控制台编辑器时,我看到:

在此处输入图片说明

Qua*_*lve 8

d3.extent接受值数组,并将边界作为数组返回。所以我想你的代码应该更像:

.domain(d3.extent(d3.values(data, function(data) { 
  return +d.logFC;
})))
Run Code Online (Sandbox Code Playgroud)

(无方括号)

不确定100%,因为我不知道data您的示例中的变量是什么。


更新:

如果数据变量是已加载的JSON对象,请执行以下操作:

.domain(d3.extent(data.children.map(function(child) { 
  return +child.logFC;
})))
Run Code Online (Sandbox Code Playgroud)