与 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

您不需要创建额外的变量 cEnter 和 countryText。您可以在所有操作中只使用原始 countries。 updated fiddle 现在可以很好地更新文本。

function updateCountries(data) { 

    console.log('data', data);

    var countries = rightPanel.selectAll('g.country').data(data);

    countries.enter()
             .append('g')
             .attr('class', 'country');

    countries.append('text')
             .attr('x', 0)
             .attr('y', 10);

    countries.text(function(d) { return d.name; });

}

Answer 2

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

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

与 D3 通用更新模式和组作斗争

Struggling with D3 general update pattern and groups

javascript

d3.js