Question

我在coffeescript类中有以下d3（立体主义）代码：

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

一切都很好。但是，我想将以下数据结构传递给我的类来实例化'view'：

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和extent与每个指标相关联。每个度量标准（将）定义对需要在上述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方法链的优雅，同时提供我想要的定制？

Answer 1

我在这里有点受限制，因为我对立体主义只有一点熟悉，我不能忍受coffeescript :)。但看起来您可能希望根据“语言数组”示例here (scroll up one paragraph)为您的地平线属性定义函数。我不知道您的代码中有@metrics，但是如果您使用了一系列密钥名称，例如["cpu", "temperature", ...]您可以在函数中进行查找，例如（对不起，切换到js）：

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

d3.js选择和call（）难题

1 个答案: