CODEWITHSUNDEEP
javascriptd3.js
Conor
Conor

Reputation: 57

d3.js update bar chart labels after sorting data

I can't seem to figure out how to update bar labels when I re-sort ranking data; essentially the label names will all remain the same, but their order will change.

Originally I have:

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

I sort the data differently, which I still call sortedData. The rectangles and rest of the graph updates successfully...save for the labels (which I have on only one rectangle bar column.)

In a new function I tried:

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

The issue here is that this just adds the new (correct) labels on top of the existing ones, instead of replacing them.

Using transition() I'm able to update the rest of the graph, but not the labels.

Any ideas of how to fix? Happy to provide more info/context if need be...

UPDATE 12/24: JSFiddle: http://jsfiddle.net/myhrvold/BVB2d/

JSFiddle showing transition, but with labels being overwritten: http://jsfiddle.net/myhrvold/BVB2d/embedded/result/

I know that by appending, I'm overwriting; but in attempting to replace, nothing happens and the original text remains, so the idea here is that I'm showing that I am at least generating the correct new labels and putting them in the right place...it's just that I'm not substituting them from my original labels...

Upvotes: 0

Views: 1045

Answers (1)

AmeliaBR
AmeliaBR

Reputation: 27544

You're completely repeating your code when you update your data -- including the chart.append('g') which creates a new group and then adds text labels to it. Because you've just created this as a new group, when you select inside it you can't select any of the labels you created the first time, so instead you end up creating all new labels.

To fix: first, as @musically_ut suggested, give each of your groups a unique class name. Then, in your update method select this group and the text elements it contains using chart.select(g.univerity-labels-container).selectAll("text"). However, you'll find you still have problems because you've got everything chained to an enter(); since you don't expect any new elements to be added when sorting, just take out that line. *

That should get it working, but the program is still painfully complex for what you're trying to do. For starters, all of this could work a lot better as an HTML table which would handle a lot of the layout for you. More importantly, you could save a lot of work if, instead of grouping elements by column you grouped them by row. That way, you would only have to join the data once, to the group, instead of doing separate data joins for each variable. If I have a chance in the next few days, I might try to write up a from-the-ground up explanations of how to approach this. In the meantime, google "d3 sortable table" for a couple examples, or look at the source code for this NYT graphic by Mike Bostock.

*For updating with an enter() step, I find most tutorials don't describe the update process very clearly, but I wrote up a step-by-step breakdown here yesterday.

Upvotes: 2

Related Questions