Add small rectangles inside BIG rectangles with unique Ids and links in D3? after an specific ID

Question

In my previous question I asked how could I generate unique IDs for generated rectangles here

Now, I've been trying to draw small rectangles inside those rectangles. However, id="rectup0" can only have 4 small rect with unique xlink:href attribute the rest of them can have 2 rectangles inside.

I've tried drawing similar rectangles like the previous ones (using .append()) but so far that just put them next to svgContainer. I've been reading some posts regarding using grouping, tried it but didn't work. Thanks in advance

UPDATE

so basically, the whole question can be resumed as adding a rect tag right after rect id="rectup0" so I can have

I know JQuery lets you add class attributes to other classes, but not sure about D3 , this will be something like adding a new rect tag programmatically. is that even possible?

UPDATE 2

I guess it is possible with d3.insert, with the following:

d3.select('#rectup0').insert('rect')
  .attr('id', 'redrect')
  .attr('x', 0)
  .attr('width', '20')
  .attr('height', '40');

however it gets it in the middle of the beginning and closing rect tag like this

Needless to say this doesn't work because of the closing rect tag

VMAtm · Accepted Answer

You can do the trick with each wrapper for selected data. It accepts 3 arguments: current data d, current index i, and whole array of data arr. So if you need some kind of checks, should you append the small rect, or not, you can create a helper function:

var testIndex = function(d, i, arr) {
    return
      // test index
      i == 5 ||
      // test current data
      d == 10 ||
      // test other array members, which would be an EnterNode here
      (i > 0 && arr[i - 1]['__data__'] == 7);  
}

// do checks in one line:
var testIndex = function (d, i, arr) { return i == 4 || i == 10 || i == 7; }

var data = svgContainer.selectAll('rect.up')
  .data(firstRow);

data
  .enter()
  .each(function (d, i, arr) {
    // select DOM element to add the rects
    t = d3.select(this);

    t
      .append('rect')
      // note that here we use empty the parameters list
      .attr('id', 'rectup' + i)
      .attr('x', posxScale)
      .attr('width', rectWidth)
      .attr('height', height)
      .attr('class','up');

    if (!testIndex(d, i, arr)) {
      return;
    }

    t
      .append('rect')
      .attr('id', 'redrect' + i)
      // note that we need to define x-coord similar to first rect
      .attr('x', posxScale)
      .attr('class', 'redrect');
});

// remove your data before redraw
data
  .exit()
  .remove();

Output:

The downside of such method is that you can't provide a attr parameter as JSON:

// wouldn't work
.attr({
  id: 'redrect',
  x: posxScale,
  width: '20',
  height: '40'
});

Add small rectangles inside BIG rectangles with unique Ids and links in D3? after an specific ID

Answers (1)

Related Questions