Question

I’ve got a couple questions if someone could shed some light.

I’ve written a d3 redraw function. The code is here. Its based off the example a bar chart pt 2

I’ve made it so clicking on a square adds to the data and then calls the redraw. The redraw() function adds the ‘gBaby’ container to the correct ‘gChild’ container, but it adds two instead of one – which is my first mystery. As well as this two ‘rect’ and ‘text’ elements are added to the same container although I realize why they are added to the same container.

1. Why are two elements drawn each time when only one element is added to data?
2. How can I modify my redraw() to append the new rect and text elements within the new gBaby container when data is added and updated (and will it remove the g container if data is spliced and updated?)
3. Will this work if data is initially empty, updated via another way and redraw() run?

Cheers for any help at all
r34ch

Answer 1

The first thing you should do is step through your code with a debugger, or by running it incrementally in the JavaScript console (with copy-and-paste, or by typing it out by hand). This way you can inspect the selections along the way and see where things start to go wrong.

As to your first question, why are two elements drawn when only one element is added to data: are you aware you are actually adding two elements to data? Array.push takes a variable number of arguments, so data.push(50, i * 110), as you are doing on click, adds two values to the end of the array. If you want to add a single value at a specific index, then use Array.splice instead.

A second danger I see, but likely not a problem, is that your selector on redraw doesn’t match your selector on creation; on creation, you say gChild.selectAll("g.baby"), but on redraw you say gChild.selectAll("g"). I would use selectAll(".baby") in both cases. I would also avoid camelCased class names, since CSS classes are case-insensitive and it is misleading to use capitalization.

The next problem is that you are doing the data-join twice, which is one more time than necessary given you only have one dataset. After you’ve joined to gChild, you don’t also need to join to gChild.selectAll("rect"). The problem is that you are adding the rects to the gChild directly rather than the gBaby you created. You need to follow the pattern that you used on creation, and append to the entering gBaby:

var gBaby = gChild.selectAll(".baby")
    .data(data);

var gBabyEnter = gBaby.enter().append("g")
    .attr("class", "baby")
    .attr("transform", function(d) { return "translate(" + d + ")"; });

gBabyEnter.append("rect")
    …

gBabyEnter.append("text")
    …

gBaby.exit().remove();

I also changed your code to use a shared transform rather than duplicating x and y attributes.