Xtykutl

In D3.js, how do you achieve the following?

selection

    .append('td')

    // if the current datum is X

    .append('a');

    // else

    .append('span');

In addition, if my data has the following structure:

data = [{

    x: {

        id: 1,

    },

    y: {

        members: [{

            id: 1

        }, {

            id: 2

        }, {

            id: 3

        }]

    }

}, {

    // ...

}, {

    // ...

}]

I have data bound to a ul element, and in each li I would like to display the members of each entry in a table. So basically

list.append('ul')

list.selectAll('li').data(data).enter().append('li')

and for each li

li.append('table')

table.data(function(d) { return d.y.members; })

where d is an entry of data.

Now how do I achieve what's described in the first question, where the condition is x.id === members.id? How is a child supposed to access the parent's datum?

Look at selection call https://github.com/d3/d3-selection#selection_call
You can define a function and depending on your parameters you can append and modify your selection

function modify(selection, param) {

  if(param === "something"){

      selection

         .append("rect")

         .attr("width", 100)

         .attr("height", 100)

         .attr("x", 100)

         .attr("y", 100)

  }else{

       selection

         .append("text")

         .text("NOTHING")

         .attr("y", 100)

         .attr("x", 100)



  }

}



d3.select("svg").call(modify, "something")

d3.select("svg").call(modify, "")