Question

我正在尝试使用数字数组创建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 + ")"
   } )

这是SCC：

.badges{
    transform: scale(.5)
}

Answer 1

CSS中的transform会覆盖您使用JavaScript设置的transform。这就是CSS的工作方式，这是正确的预期。

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

.st0 {
    transform: scale(.5)
}

这是您所做的更改的代码：

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>

无法同时应用缩放和转换为一组元素

1 个答案: