CODEWITHSUNDEEP
javascriptd3.js
Arthur Lee
Arthur Lee

Reputation: 121

Passing a javascript argument into D3

I am currently making a scatterplot matrix in D3. My data point structure looks like this:

      function plot(p) {
      var cell = d3.select(this);

      x.domain(domainByTrait[p.x]);
      y.domain(domainByTrait[p.y]);

      // Data points
      cell.selectAll("circle")
      .data(data)
      .enter().append("circle")
      .attr("cx", function (d) { return x(d[p.x]); })
      .attr("cy", function (d) { return y(d[p.y]); })
      .attr("r", 3)
      .style("fill", function (d) { return color(d.species); });
  }

I also have a javascript function: 

      function create(columnsplit) {

      cell = svg.selectAll(".cell")
      .data(cross(traits, traits))
      .enter().append("g")
      .attr("class", "cell")
      .attr("transform", function (d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; })
      .each(plot);

      cell.call(brush);

  }

where plot is assigned. However, I would like to replace the hardcoded d.species with the columnsplit argument that I have in my create function (unless d.species doesn't work like I originally thought). How exactly would I do this?

Here is how I the traits for the datum d are being created, from what I can understand:

domainByTrait = {},
      traits = d3.keys(data[0]).filter(function (d) { return d !== columnsplit; }),
      n = traits.length;

traits.forEach(function (trait) {
              domainByTrait[trait] = d3.extent(data, function (d) { return d[trait]; });
          });

I am using this as my template: http://bl.ocks.org/mbostock/4063663

Thanks

Upvotes: 0

Views: 63

Answers (1)

McGarnagle
McGarnagle

Reputation: 102793

If I understand, you want to access the property named the value of "columnsplit". To do this you just use the indexer notation for accessing properties:

d[columnsplit]

In other words, the d.species syntax is equivalent to d["species"] (reference).

Upvotes: 1

Related Questions