1

I am working through this posting trying to get a d3 chart to come to life. Also reading other posts, so getting input from across the community.... https://medium.com/@vaibhavkumar_19430/how-to-create-a-grouped-bar-chart-in-d3-js-232c54f85894

I see 2 different syntaxes used.

The first is used below on the x attribute. I believe this is called 'fat arrow' The second is an inline function and is used on the Y attribute. 

model_name.selectAll(".bar.field1")
  .data(d => [d])
  .enter()
  .append("rect")
  .attr("class", "bar field1")
.style("fill","blue")
  .attr("x", d => xScale1('field1'))
  .attr("y", function(d) { return yScale(d.field1) })

Are these equivalent?

Can the fat arrow only be used when the desired result can be produced w/ a single line?

Can you use something like this (I cant make it work)

  .attr("x", d =>{ stmt1;  stmt2;  etc;  return d*5; }

Does fat arrow offer some great benefit such that it should be considered in a 1 line result case?

greg
  • 1,673
  • 1
  • 17
  • 30
  • 4
    Maybe read documentation on fat arrow? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – epascarello Aug 22 '19 at 19:11
  • 1
    Did you try this by itself? Yes, you can. Run this from your console`(d=>{1;2;3;return d})()` Something else in your code is the problem – Ruan Mendes Aug 22 '19 at 19:12
  • 1
    Essentially they're the same. The only real difference is how an arrow function treats its `this` reference. Sometimes that's critical, but often it's irrelevant. And no, arrow functions can have any number of arbitrary statements, just like a normal function. – Robin Zigmond Aug 22 '19 at 19:13
  • 1
    @RobinZigmond Well, not really, fat arrows also don't need a parens around its parameter if it's a single one, don't need braces around the body for single statements. It's all syntax sugar... – Ruan Mendes Aug 22 '19 at 19:14
  • 1
    @JuanMendes, yes I know. But that's just syntactic niceties. And yes they make arrow functions most convenient for single-statement bodies, the kind of trivial functions you sometimes need to pass to `map` or similar. But syntax aside, the only real semantic difference, and I believe the real reason they were introduced, was their treatment of `this` (avoiding some common `this` gotchas, for one). – Robin Zigmond Aug 22 '19 at 19:17

1 Answers1

8

Fat arrow has two differences from normal functions:

  1. If you're returning a value in a single-line function, you can omit the "return" and braces, using an implicit return. Like val => val.name is the same as (val) => { return val.name; }.
  2. The use of the keyword this changes. In a fat arrow function, it's bound to the same context as the outer scope.

The example you posted of multi-statement fat arrow function should work fine, assuming the missing parenthesis is just a typo. I don't know much about d3, though; does xScale1 return a number? If not, that may be why your function doesn't work, since it returns a number.

IceMetalPunk
  • 5,476
  • 3
  • 19
  • 26