javascript - 覆盖一个地平线实例的范围

Question

我有一系列像这样创建的地平线图:

d3.select("body")
  .selectAll(".horizon")
  .data(metrics)
  .enter()
  .append("div")
  .attr("class", "horizon")
  .attr("id", function(d){return d.toString();})
  .call(context.horizon().height(['75']));

其中 metrics 是 metric 对象的数组。

我想为这些 horizo​​n 对象中的一个重新定义范围。

我尝试在一张图表上调用 extent 函数，但我不确定我是否正确调用了它，甚至不确定是否正确选择了它:

d3.select("#id-attribute")
  .call(context.horizon().extent(function(d,i){return([0,1000]);}));

这种方式似乎有效，但图形显示被搞砸了，图形下方添加了额外的空白，并且图形的运动没有考虑到这一点，并且图形的顶部没有动画。我怀疑它在某种程度上是由于它是 extent 对象的新实例，所以我尝试了以下方法:

d3.select("#id-attribute")
  .call(extent(function(d,i){return([0,1000]);}));

但这会生成:“ReferenceError:未定义范围”。

我已经尝试有效地重新定义metric的extent函数:

metrics[3].extent = function(d,i) {return([0,100]);};

但这会导致图形为空白(尽管将鼠标悬停在其上会显示读数中的数字)，并且当鼠标未将鼠标悬停在任何图表。

老实说，我不理解这些东西是如何组合在一起的，而且我对 JavaScript 也没有特别的经验，所以我不确定我的错误在哪里。我完全超出了我的能力范围。 任何提示将不胜感激。

Answer 1

在初次调用后是否需要重新定义生成地平线的范围？

如果没有，请尝试这样的操作:

d3.select("body")
  .selectAll(".horizon")
  .data(metrics)
  .enter()
  .append("div")
  .attr("class", "horizon")
  .attr("id", function(d){return d.toString();})
  .call(context.horizon()  
             .height(['75'])
             .extent(function(d,i){  //use this function to change extents
                   if (d.toString() == 'Whatever the name is'){
                        return [0,1000];
                   } else {
                        return [ <default min>, <default max>]
                   }
              })
 )

您可以设置自己的默认范围，或使用 d3.min()/d3.max() 等函数来获取地平线的值。您只需要返回一个包含两个元素的数组。