d3 scaling basic shapes

Question

I'm trying to dynamically scale some shapes based on the data. Here's what I have so far:

svg.selectAll(".point")
  .data(data)
  .enter()
  .append("path")
  .attr("class", "point")
  .attr("d", d3.svg.symbol().type("triangle-up"))
  .attr("transform", function(d) { return "translate(" + x(d.x) + "," + 
    y(d.y) + ")"; });

Is there another attr that I can add? I tried to use the following but not working:

.attr("transform", "scale(xMap)");

xMap is a value in data scaled to a range.

Answer 1

You can do the translate and the scale in the same anonymous function. Besides that, you have to concatenate the string with the number. The way you're doing...

"scale(xMap)"

... you're passing literally "xMap" to the scale() .

Thus, it should be:

.attr("transform", function(d) { 
    return "translate(" + x(d.x) + "," + y(d.y) + ") scale(" + xMap + ")";
});