javascript - 将数据绑定(bind)到D3中的父节点而不是选择--模式

Question

D3 中抽象“组件”时推荐的模式是什么？

假设我有一个列表。通常我会这样做

d3.select('ol')
  .selectAll('li')
  .data(array)
  .enter()
  .append('li')
  .text(_.property('label'))

但是，当将其抽象为组件时，在使用的地方我只想这样做

d3.select('ol')
  .data(array)
  .call(component)

问题在于数据需要绑定(bind)到.selectAll，因此人们需要在使用的地方执行.selectAll，但这违反了抽象(人们需要知道该组件将附加什么类型的元素)

Answer 1

有趣的提议。
我像这样实现了“组件”并检查了它的工作情况。
(为了我的测试，源码做了一些修改。)
我想知道不使用 __data__ 的解决方案...

var array = [
    {label: 'label1'},
    {label: 'label2'},
    {label: 'label3'},
    {label: 'label4'},
    {label: 'label5'}
]

function component(selection) {
    selection.selectAll('li')
        .data(selection.datum()) // edited to use .datum() instead of selection[0][0].__data__
        .enter()
        .append('li')
        .text(_.property('label'))
}

d3.select('ol')
    .datum(array)
    .call(component)