CODEWITHSUNDEEP
javascriptcssd3.js
Julio Rodriguez
Julio Rodriguez

Reputation: 515

Unable to apply both scale and translate to a set of element

I'm trying to create 7 svg elements separated each other using a array of numbers. the thing is that I'm trying to apply a transform:scale() using css, and transform:translate() using d3js, but the result is not the expected. All the images are one on top of other.

this is the JS code:

var width = 512
var height = 700

var badge = '<path class="st0" d="M143.4,238.8v-179h-12.9c-0.1-11.5-9.4-20.8-20.9-20.8s-20.8,9.3-20.9,20.8H75.5v179h0.1l34,21.2l34-21.2H143.4L143.4,238.8z M109.6,79.5C98.8,79.5,90,70.7,90,59.9s8.8-19.6,19.6-19.6s19.6,8.8,19.6,19.6S120.4,79.5,109.6,79.5z"/>'

var distance = [40,80,120,160,200,240,280]

var svg = d3.select("body")
  .append("svg")
  .attr("width",width)
  .attr("height",height)

var badgeWrapper = svg.append("g")
  .attr("class","badgeWrapper")

var badges = badgeWrapper.selectAll("g")
  .data(distance)
   .enter()
   .append("g")
   .attr("class","badges")  
   .html(badge)
   .attr("transform", function(d,i){
       return "translate(" + d + "," + 0 + ")"
   } )

and this is the SCC:

.badges{
    transform: scale(.5)
}

Upvotes: 1

Views: 50

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102218

The transform in the CSS overrides the transform you set with JavaScript. That's the way CSS works, and it's proper expected.

An easy solution is using the paths' class in the CSS:

.st0 {
    transform: scale(.5)
}

Here is your code with that change:

var width = 512
var height = 700

var badge = '<path class="st0" d="M143.4,238.8v-179h-12.9c-0.1-11.5-9.4-20.8-20.9-20.8s-20.8,9.3-20.9,20.8H75.5v179h0.1l34,21.2l34-21.2H143.4L143.4,238.8z M109.6,79.5C98.8,79.5,90,70.7,90,59.9s8.8-19.6,19.6-19.6s19.6,8.8,19.6,19.6S120.4,79.5,109.6,79.5z"/>'

var distance = [40, 80, 120, 160, 200, 240, 280]

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)

var badgeWrapper = svg.append("g")
  .attr("class", "badgeWrapper")

var badges = badgeWrapper.selectAll("g")
  .data(distance)
  .enter()
  .append("g")
  .attr("class", "badges")
  .html(badge)
  .attr("transform", function(d, i) {
    return "translate(" + d + "," + 0 + ")"
  })
.st0 {
  transform: scale(.5)
}
<script src="https://d3js.org/d3.v5.min.js"></script>

Upvotes: 1

Related Questions