javascript - 在单个链中更新、输入和退出选择

Question

我正在使用 D3 创建响应式可视化。每当数据发生变化时，我发现自己经常使用这种模式:

function redraw(myData) {
    // if data points decreased, remove some rectangles
    d3.selectAll('rect')
        .data(myData)
        .exit()
        .remove();
    // if data points increased, add some rectangles
    d3.selectAll('rect')
        .data(myData)
        .enter()
        .append('rect');
    // assign attribute values to all rectangles
    d3.selectAll('rect')
        .data(myData)
        .attr('width', (d) => d.width)
        .attr('height', (d) => d.height)
        .attr('fill', 'blue');
}

有没有办法将此操作缩短为单个长操作链？

我见过很多 D3 示例，例如 this这对于一次性抽奖来说很好。我无法让他们为重绘工作。

Answer 1

join() 方法

你问...

Is there a way to shorten this operation to a single long chain of operations? (emphasis mine)

是的，有:如果您使用的是 D3 v5.8 或更高版本，您可以利用新方法 selection.join()使用 update、enter 和 exit 选择创建一个链。顺便说一下，您链接的示例(由 D3 创作者 Bostock 制作)已经在使用 join()，所以它不是您所说的“一次性抽奖” .

您的整个功能将是:

function redraw(myData) {
    d3.select(foo).selectAll('rect')
        .data(myData)
        .join('rect')
        .attr('width', (d) => d.width)
        .attr('height', (d) => d.height)
        .attr('fill', 'blue');
};

这是一个基本的演示:

const svg = d3.select("svg");

d3.interval(function() {
  redraw(getData());
}, 1500);

redraw(getData());

function redraw(myData) {
  svg.selectAll('rect')
    .data(myData)
    .join('rect')
    .attr('width', (d) => d.width)
    .attr('height', (d) => d.height)
    .attr('x', (d) => d.x)
    .attr('y', (d) => d.y)
    .style('fill', 'lavender')
    .style('stroke', '#444');
};

function getData() {
  return d3.range(~~(Math.random() * 20)).map(function(d) {
    return {
      x: Math.random() * 250,
      y: Math.random() * 100,
      width: 10 + Math.random() * 40,
      height: 10 + Math.random() * 40,
    }
  });
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

---

PS:您当前的功能存在一些问题。首先，d3.selectAll 与selection.selectAll 不同(注意我函数中的d3.select(foo))。其次，您在该函数中没有正确的 update、enter 和 exit 选择。看看here对于惯用模式。