可以每行画日期吗

Is it possible to draw dates per line?

本文关键字：日期      更新时间：2023-09-26

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

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

我想每行画一个容器，然后在每个容器中画一些drops，每个容器对应一个日期。

对于划线集装箱，我有以下代码：

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中得到了整个数据集（带标题）。我希望只获取当前选定的元素数据。

可以每行画我的日期吗？如果是，如何仅检索当前数据和当前选择（当前行容器）？

您需要一个子选择。我通常使用.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
    )
});
相关文章：