Displaying two strings in a table using d3.js - d3.js

Question

I've been trying to use d3.js to display a table using two input strings, I've added the code below. When displaying the second string, only the characters with indices that are greater than the length of the string x are displayed.
I think it's something related to the anonymous functions, when iterating through the second string, i begins with the index value it finished off with in the first string e.g., only "fo" is displayed from the second string instead of "fresihnfo". Can anyone give me some pointers on how to fix this?
Thanks!
var x = ["a", "e", "d", "i", "r", "z"];
var y = ["f", "r", "s", "i", "h", "n", "f", "o"];
var w = (x.length + 1) * 50;
var h = (y.length + 1) * 50;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
/*Displays the first string*/
svg.selectAll("rect")
.data(x)
.enter()
.append("rect")
.attr("x", function(d, i) {
return (i * 45) + 45;
})
.attr("y", "0px")
.attr("width", "40px")
.attr("height", "40px")
.attr("fill", "rgb(0, 0, 102)");
svg.selectAll("text")
.data(x)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return (i * 45) + 65;
})
.attr("y", "27px")
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "white");
/*Displays the second string*/
svg.selectAll("rect")
.data(y)
.enter()
.append("rect")
.attr("x", "0px")
.attr("y", function(d, i) {
return ((i - x.length) * 45) + 45;
})
.attr("width", "40px")
.attr("height", "40px")
.attr("fill", "rgb(0, 0, 102)");
svg.selectAll("text")
.data(y)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", "20px")
.attr("y", function(d, i) {
return ((i - x.length) * 45) + 70;
})
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "white");
Current output:
Desired output would be to have the rest of the string y displayed in the left column.

Answer 1

As Marc said, the problem is that your second selection each time is being interpretted as an update to your first selection, not as a new set of elements. And since you only work on the enter() part of the update, you don't even see the fact that you've changed the data for your first set of rectangles.
To confirm that the first set of rectangles have been given the data from your second array, right-click on one, choose "Inspect Element" and then open up the properties tab in your inspector -- the __data__ property holds the element's D3 data object.
So how do you fix it? You need a way of distinguishing between the two groups of rectangles in your select statement. There are two options:
Option 1: Use sub-selections on SVG group elements (<g>)
You've got two groups of rectangles, so it makes sense to use the svg grouping element to keep them organized. Instead of adding your rectangles directly to your svg, add a group element to the svg and then add the rectangles/text to it.
svg.append("g").selectAll("rect") //etc.
Do the same for the second set of rectangles, and they'll all be nicely arranged in the second group, so long as your select statement is always called from the group selection, it will only select elements that are part of that group.
Option 2: Use a class attribute to distinguish the two element types
You've got two types of values, x and y, so you should distinguish which type your svg elements belong to by setting a corresponding class attribute. Then, in your select statement, make sure you only select elements of the correct class. The CSS selector format for an element of a certain class is elementName.ClassName, so your code would look like:
.selectAll("rect.x")
.data(x)
enter()
.append("rect")
.classed("x", true)
// etc.
Or, Option 3: Use both
If you're going to want to update the rectangles in the future, just putting them in two groups isn't good enough -- you need a way to distinguish the groups, too. So add an x or y class when you append the <g> elements and use a "g.x" or "g.y" selector when you create them.
I highly recommend you read up on selections, selectors, nested selections, and the update process if you want to keep your D3 code straight. There's a list of tutorials on the wiki.
P.S. The i values that you create as named parameters of your anonymous functions are always limited in scope to that function. You could give them different names if you wanted, their value will always be the value that D3 passes in to them -- the data object for the first parameter, and the index within the current selection for the second parameter.

Answer 2

the main goal of selectAll() is to select exist elements in the container, when worked with data()
it will join data with elements so we can
use enter() to add new element for new data items;
use update() to update elements which match the data.
use exit() to remove elements without data to match
when you use svg.selectAll("rect").data(x).enter() to append rect selectAll() will return 0 element
data(x).enter() will produce placeholder for each data so you can append all data in x
but when use svg.selectAll("rect").data(y).enter() to append rect for y. selectAll() will return 6
rects, so data(y).enter() will product placeholder for 'f' and 'o' this is why you only get two
elements
solution: use different selector for x and y, such as different class name
svg.selectAll(".x").data(x).enter().append("rect").attr("class", "x"); // other operation
svg.selectAll(".y").data(x).enter().append("rect").attr("class", "y"); // other operation
you can get deep understand of d3 selection and data join with these articles:
http://bost.ocks.org/mike/join/
http://bost.ocks.org/mike/selection/