Question

在重新排序排名数据时，我似乎无法弄清楚如何更新条形标签;基本上标签名称都将保持不变，但它们的顺序会发生变化。

原来我有：

    // University Names
    labelsContainer = chart.append('g')
                           .attr('transform', 'translate(' + (uniLabel - barLabelPadding) + ',' + (gridLabelHeight + topMargin) + ')') 
                           .selectAll('text')
                           .data(sortedData)
                           .enter()
                           .append('text')
                           .attr('x', xoffset)
                           .attr('y', yText)
                           .attr('stroke', 'none')
                           .attr('fill', 'black')
                           .attr("dy", ".35em") // vertical-align: middle
                           .attr('text-anchor', 'end')
                           .text(barLabel);

我对数据进行了不同的排序，我仍称之为sortedData。图形的矩形和其余部分成功更新...保存标签（我只有一个矩形条列。）

在我尝试的新功能中：

        // update University Names (this overwrites, however... I want to select the existing label instead of appending text on top of the original text)
        labelsContainer = chart.append('g')
                               .attr('transform', 'translate(' + (uniLabel - barLabelPadding) + ',' + (gridLabelHeight + topMargin) + ')') 
                               .selectAll('text')
                               .data(sortedData)
                               .enter()              // using transition   ... or selecting the group ... does not allow the new text to appear!
                               .append('text')
                               .attr('x', xoffset)
                               .attr('y', yText)
                               .attr('stroke', 'none')
                               .attr('fill', 'black')
                               .attr("dy", ".35em") // vertical-align: middle
                               .attr('text-anchor', 'end')
                               .text(barLabel);

这里的问题是，这只是在现有标签之上添加新的（正确的）标签，而不是替换它们。

使用transition（）我可以更新图表的其余部分，但不能更新标签。

有关如何修复的想法？如果需要，很高兴提供更多信息/背景...

更新12月24日：JSFiddle：http://jsfiddle.net/myhrvold/BVB2d/

JSFiddle显示转换，但标签被覆盖：http://jsfiddle.net/myhrvold/BVB2d/embedded/result/

我知道通过追加，我会覆盖;但是在尝试更换时，没有任何反应，原始文本仍然存在，所以这里的想法是我表明我至少生成了正确的新标签并将它们放在正确的位置...这只是我的意思不要用我原来的标签代替它们......

Answer 1

您在更新数据时完全重复代码 - 包括创建新组的chart.append('g')，然后为其添加文本标签。由于您刚刚将其创建为新组，因此当您在内部选择时，您无法选择第一次创建的任何标签，因此您最终会创建所有新标签。

要修复：首先，正如@musically_ut建议的那样，为每个组提供一个唯一的类名。然后，在您的更新方法中，使用chart.select(g.univerity-labels-container).selectAll("text")选择此组及其包含的文本元素。但是，你会发现你仍然遇到问题，因为你已经把一切都链接到了一个（）;因为您不希望在排序时添加任何新元素，只需取出该行即可。 *

这应该让它运作起来，但是对于你正在尝试做的事情来说，程序仍然非常复杂。对于初学者来说，所有这些都可以作为一个HTML表格更好地工作，它可以为你处理很多布局。更重要的是，如果不按列对元素进行分组，而是按行对其进行分组，则可以节省大量工作。这样，您只需要将数据加入到组中，而不是为每个变量执行单独的数据连接。如果我在接下来的几天里有机会，我可能会尝试写一篇关于如何解决这个问题的实地解释。与此同时，google＆＃34; d3可排序表＆＃34;对于几个示例，或查看此NYT graphic by Mike Bostock的源代码。

*要使用enter()步骤进行更新，我发现大多数教程都没有非常清楚地描述更新过程，但我昨天写了一步一步的细分here。 / p>

d3.js排序数据后更新条形图标签

1 个答案: