I have created text nodes that has some value. So whenever data updates, only the value should update, the text nodes shouldn't be created again.

systemLevel
.enter()
.append('g')
.classed("system-level", true)
.attr("depth", function(d, i) {
  return i;
})
.each(function(d, i) {
  var columnHeader = graphHeaders.append("g")
                                 .classed("system-column-header", true);
  columnHeader.append('text')
              .attr('font-size', '14')
              .attr('font-weight', 'bold')
              .attr('fill', "red")
              .attr('x', 50 * i)
              .attr('y', 50)
              .text(function() {
                return d.newUser;
              });
  columnHeader.append('text')
              .attr('font-size', '14')
              .attr('font-weight', 'bold')
              .attr('fill', "blue")
              .attr('x', 50* i)
              .attr('y', 70)
              .text(function() {
                return d.value;
              });
});

I have created an example on Js Bin. ,output

I am not sure, how to update just the text value. Any help is appreciated!

I have created text nodes that has some value. So whenever data updates, only the value should update, the text nodes shouldn't be created again.

systemLevel
.enter()
.append('g')
.classed("system-level", true)
.attr("depth", function(d, i) {
  return i;
})
.each(function(d, i) {
  var columnHeader = graphHeaders.append("g")
                                 .classed("system-column-header", true);
  columnHeader.append('text')
              .attr('font-size', '14')
              .attr('font-weight', 'bold')
              .attr('fill', "red")
              .attr('x', 50 * i)
              .attr('y', 50)
              .text(function() {
                return d.newUser;
              });
  columnHeader.append('text')
              .attr('font-size', '14')
              .attr('font-weight', 'bold')
              .attr('fill', "blue")
              .attr('x', 50* i)
              .attr('y', 70)
              .text(function() {
                return d.value;
              });
});

I have created an example on Js Bin. https://jsbin./dixeqe/edit?js,output

I am not sure, how to update just the text value. Any help is appreciated!

• javascript
• html
• d3.js

Share Improve this question Follow edited Oct 2, 2015 at 3:56 user2532865 asked Oct 2, 2015 at 0:56 user2532865user2532865 11911 silver badge1010 bronze badges 2

• So what exactly is the problem? The D3 update pattern is covered in numerous tutorials, e.g. bost.ocks/mike/circles – Lars Kotthoff Commented Oct 2, 2015 at 1:34
• I have referred many tutorials on update, but still not able to use it in this particular scenario. – user2532865 Commented Oct 2, 2015 at 4:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You're not using the usual D3 update pattern, described in many tutorials (e.g. here). You need to restructure the code to use this instead of unconditionally appending new elements:

var columnHeader = graphHeaders.selectAll("g").data(dataset);
columnHeader.enter().append("g").classed("system-column-header", true);
var texts = columnHeader.selectAll("text").data(function(d) { return [d.newUser, d.value]; });
texts.enter().append("text")
  .attr('font-size', '14')
  .attr('font-weight', 'bold')
  .attr('fill', "red")
  .attr('x', function(d, i, j) { return 50 * j; })
  .attr('y', function(d, i) { return 50 + 20 * i; });
texts.text(function(d) { return d; });

Modified jsbin here.