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; }); 
}

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

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

JSFiddle，其中包含完整代码：http://jsfiddle.net/1qhnbqbw/1/

Answer 1

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

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

Answer 2

您不需要创建其他变量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; });

}

在D3通用更新模式和组中苦苦挣扎

2 个答案: