Javascript 无法对一组元素同时应用缩放和平移

我试图创建7个svg元素，它们使用数字数组相互分隔。问题是，我试图使用css应用

transform:scale（）

，并使用d3js应用

transform:translate（）

，但结果不是预期的。所有的图像都是一个接一个的

这是JS代码：

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

---

CSS中的

transform

覆盖了使用JavaScript设置的

transform

。这就是CSS的工作方式，这是正确的预期

一个简单的解决方案是在CSS中使用paths类：

.st0 {
    transform: scale(.5)
}

以下是更改后的代码：

var宽度=512
变量高度=700
var badge=“”
变量距离=[40,80,120,160,200,240,280]
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
var badgeWrapper=svg.append（“g”）
.attr（“类”、“徽章包装器”）
var badges=badgeWrapper.selectAll（“g”）
.数据（距离）
.输入（）
.附加（“g”）
.attr（“等级”、“徽章”）
.html（徽章）
.attr（“转换”，函数（d，i）{
返回“translate（“+d+”，“+0+”）
})

.st0{
变换：缩放（.5）
}

---

第一个观察：代码没有运行。如果您提供一个

运行代码片段

，我们希望它能够运行

.st0 {
    transform: scale(.5)
}