覆盖一个水平实例的范围答案

【问题标题】：override extent for one horizon instance覆盖一个水平实例的范围
【发布时间】：2014-02-17 20:50:04
【问题描述】：

我有一系列像这样创建的水平线图：

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 对象的数组。

我想为这些horizon 对象中的一个重新定义extent。

我已尝试在一个图表上调用 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: extent is not defined”。

我尝试重新定义metric 的extent 函数，效果很好：

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

但这会导致图表为空白（尽管将鼠标悬停在它上面会显示读数中的数字），并且当鼠标没有悬停在任何图表。

老实说，我不明白这些东西是如何组合在一起的，我对 JavaScript 也不是特别有经验，所以我不确定我的错误在哪里。我完全超出了我的深度。任何提示将不胜感激。

【问题讨论】：

标签： javascript d3.js cubism.js

【解决方案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() 之类的函数来获取视野值。您只需要返回一个包含两个元素的数组。

【讨论】：