javascript - 努力应对 D3 一般更新模式和组

Question

我想使用 D3、SVG 组和文本元素动态更新图例。这是我的函数，在更新图例时会被调用。

目标是如果文本元素尚不存在，它将添加它们。如果它们确实存在，它将根据新数据更新这些文本元素的内容。

function updateCountryLegend(data) { 
  var countries = rightPanel.selectAll('g.country').data(data);    
  var cEnter = countries.enter()
                      .append('g')
                      .attr('class', 'country');    
  var countryText = cEnter.append('text')
         .attr('x', 0)
         .attr('y', 10);
  countryText.text(function(d) { return d.name; }); 
}

当前代码添加元素正常，但未更新它们。我认为这是因为文本仅在输入选择上设置。但无论我如何尝试，我都无法弄清楚如何在更新选择上设置文本。

我想继续使用 SVG 组元素，以便我可以添加矩形来指示图例颜色等。

JSFiddle 包含完整代码:http://jsfiddle.net/1qhnbqbw/1/

Answer 1

您的情况的困难在于更新选择包含 g 元素，但您想要更改 text 元素。为此，请在更新选择上调用另一个 .select() - countries.select("text")。这个新选择将包含 text 元素，您现在可以以通常的方式更新这些元素，同时将新数据从 g 继承到 text 元素。

完整演示 here 。我已将 HTML 的 g 替换为 div，删除了一些不必要的变量，并处理了退出选择。