Question

我正面临着与D3.js的特殊问题。我目前有一个类似于的数据集：

[
    { title: 'First title', dates: [ /* a lot of dates */ ] },
    { title: 'Second title', dates: [ /* a lot of dates */ ] },
    // ...
]

我想每行绘制一个容器，然后在每个容器中绘制一些drops，每个{1}}对应一个日期。

对于绘图线容器，我有以下代码：

const dropLines = svg.selectAll('.drops').data(data, d => d.title);

dropLines.enter()
    .append('g')
    .attr('transform', (d, idx) => `translate(10, ${scales.y(idx)})`)
    .attr('fill', configuration.eventLineColor)
    .classed('drops', true);

dropLines.exit().remove();

效果很好，我收到了所有的行容器。

但是，我怎样才能为我的约会画画？我试过像：

const drop = data => {
    console.log(data);
};

dropLines.enter()
    // ...
    .each(drop);

但是我在console.log中获得了整个数据集（包含标题）。我希望只获得当前选定的元素数据。

是否可以每行绘制我的日期？如果是这样，我如何只检索当前数据和当前选择（当前行容器）？

Answer 1

您需要一个子选择。我通常会使用.each：

// Note: Not .enter(), you've already handled that
dropLines.each(function(drop) {
    // Now a new selection
    var date = d3.select(this).selectAll('.date').data(drop.dates);

    // "date" is now bound to the array of dates, proceed as usual
    date.enter().append(
        // ... etc
    )
});

是否可以每行绘制日期？

1 个答案: