CODEWITHSUNDEEP
javascriptd3.js
ajax2000
ajax2000

Reputation: 711

d3 scaling basic shapes

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.

Upvotes: 1

Views: 107

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

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 + ")";
});

Upvotes: 1

Related Questions