CODEWITHSUNDEEP
d3.jssvgdata-visualization
avernus
avernus

Reputation: 326

Having issue with translate function

I have coordinatesX and coordinatesY arrays. For example if I want to draw an arc between coordinatesX[1] and coordinatesY[4], a part of the code goes :

svg.append("path")

    .attr("d", arc)
    .attr("fill", "red")
    .attr("transform", "translate(coordinatesX[1],coordinatesY[4])");

I am having problem with translate function. It says :

Error: Invalid value for attribute transform="translate(coordinatesX[1],coordinatesY[4])"

How can I overcome this problem?

Thanks in advance.

Upvotes: 0

Views: 86

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102219

It has to be a single string. As Salvador pointed out in the comments, in your example you were using coordinatesX[1] etc literally. But, if you concatenate, JavaScript creates a single string for you (if you add a number to a string, the result will be a string). In your case:

.attr("transform", "translate(" + coordinatesX[1] + "," + coordinatesY[4]) + ")");

Upvotes: 2

Related Questions