d3 选择没有按预期使用 .join() 传递数据

Question

我一直在使用 d3 v5 .join 更新模式。这很好，但我的代码中有一种情况，数据没有按预期传递，我不知道出了什么问题。我的代码如下所示：

let binnedWrap = wrap.selectAll('.attr-wrap').data(sortedBins).join('g').attr('class', d=> d.key + ' attr-wrap');
binnedWrap.attr('transform', (d, i)=>  'translate(0,'+(i * (height + 5))+')');

let label = binnedWrap.append('text').text(d=> d.key).attr('y', 40).attr('x', 80).style('text-anchor', 'end');

let branchGroup = binnedWrap.selectAll('g.branch-bin').data(d=> {
    ///THIS IS RIGHT
    console.log('data before the branch bins',d);
    return d.branches}).join('g').classed('branch-bin', true);

branchGroup.attr('transform', (d, i)=> 'translate('+(100 + branchScale(i))+')');

这按预期工作。控制的数据是正确的，它为 d.branches

中的每个分支元素创建了一个分类为 'branch-bin' 的组

但是-当我尝试在每个 'branch-bin' 组中使用分支数据时，我没有得到预期的 d.branches 数据：

 let continDist = branchGroup.filter(f=> f.type === 'continuous');

var lineGen = d3.line()
.y((d, i)=> {
    console.log('y',d, i)
    let y = d3.scaleLinear().domain([0, 16]).range([0, height]);
    return y(i); 
})
.x(d=> {
    let x = d3.scaleLinear().domain([0, 100]).range([0, 100]);
    return x(Object.entries(d).length - 2); 
});
//THIS IS RIGHT//
console.log(continDist.data())

continDist.append('path').data((d, i)=> {
    console.log('supposed to be data in d branch', d, i);
    return lineGen(d.bins)});

输出看起来与上面的控制台相同。该路径未传递分支数据。

如果知道这里发生了什么，我们将不胜感激！

Answer 1

我错误地使用了

continDist.append('path').data((d, i)=>lineGen(d.bins));

而不是continDist.append('path').attr('d', (d, i)=>lineGen(d.bins));

将 d 指定为 attr 路径后，它按预期工作。

d3 选择没有按预期使用 .join() 传递数据

d3 selections not passing data down as expected with .join()

selection

d3.js

ecmascript-6