How do I return a dictionary using the `=>` syntax?

Question

I'd like to make a table in D3. I am using this as an example.

I'm updating it to use the shorter, more clear syntax with =>.

// create a cell in each row for each column
    var cells = rows.selectAll('td')
      .data(function (row) {
        return columns.map(function (column) {
          return {column: column, value: row[column]};
        });
      })
      .enter()
      .append('td')
      .text(function (d) { return d.value; });

I would like to turn that into something like this.

// create a cell in each row for each column
var cells = rows.selectAll("td")
    .data(d => columns.map(i =>
      {column: i, value: d[i]}
    ))
    .enter()
    .append("td")
    .text(d => d.value)

But, it gives me an error that says SyntaxError: unexpected token: ':'. Is it possible to pass a dictionary back with the => symbol?

It should be: `.data(d => columns.map(i =>({column: i, value: d[i]})))`, wrapping the returned object in parentheses. — Gerardo Furtado, May 03 '19 at 05:37
Do tables work with d3? I can see my table when I attach it to the body, but when I add it to a `g` element within an `svg` element, the table is invisible. — snoweytruvO, May 03 '19 at 05:48
Yes, D3 can manipulate HTML. Your problem has nothing to do with D3: you **cannot** append a table (HTML element) to an SVG. — Gerardo Furtado, May 03 '19 at 05:49
Can I append it to a `g` element within an SVG? I'm just trying to figure out how to get it on the same canvas as the rest of my viz. — snoweytruvO, May 03 '19 at 05:55
No, again, you cannot append HTML elements into an SVG. The easiest alternative is using `foreignObject`, just google it. — Gerardo Furtado, May 03 '19 at 06:02

How do I return a dictionary using the `=>` syntax?

0 Answers0