d3.js 选择和 call() 难题答案

【问题标题】：d3.js selection and call() conundrumd3.js 选择和 call() 难题
【发布时间】：2013-05-11 19:21:42
【问题描述】：

我在咖啡脚本类中有以下d3（立体主义）代码：

d3.select("view").selectAll(".horizon")
    .data( @metrics )
  .enter()
    .insert("div", ".bottom")
    .attr("class", "horizon")
  .call( @ctx.horizon() )

一切都很好。但是，我想将以下数据结构传递到我的类中以实例化“视图”：

metricGroup =
  cpu:
    extent: [0,100]
  temperature:
    extent: [0,80]
  power:
    scale: d3.scale.ordinal( [0,1,2] ).range( [-2,1,-1] )
    extent: [-2,1]

如您所见，我希望将某些 scale 和 extents 与每个指标相关联。每个指标（将）定义对每个 horizon 对象的特定调用，这些对象需要链接到上述 d3 代码中，这样：

.call( 
  @ctx.horizon()
    .scale(@metricGroup.power.scale)
    .extent(@metricGroup.power.extent) 
)

所以对于“功率”指标，它会是

.call(
  @ctx.horizon()
    .scale(d3.scale.ordinal( [0,1,2] ).range( [-2,1,-1] ))
    .extent( [-2,1] )
)

我怎样才能保持 select/enter/call 方法链的优雅，同时提供我想要的自定义？

【问题讨论】：

您是否尝试过将秤等作为您传入的数据的一部分？

标签： select d3.js call cubism.js

【解决方案1】：

我在这里有点受限制，因为我对立体主义只是有点熟悉，而且我受不了 coffeescript :)。但看起来您可能想要为您的地平线属性定义函数，根据“语言数组”示例here (scroll up one paragraph)。我不知道您的代码中的 @metrics 是什么，但如果您使用了一个键名数组，例如["cpu", "temperature", ...] 你可以在函数中进行查找，例如（抱歉，改用js）：

.call(
    ctx.horizon()
       .scale(function(d) { return metricGroup[d].scale || defaultScale; })
       // etc
)

【讨论】：