使用 D3.JS 旋转 SVG 图像不起作用

Question

我一直在尝试使用 D3.js 重复顺时针旋转 svg 图像中的一些齿轮，但我似乎无法理解代码或图像有什么问题。我能够使用下面的代码平移和旋转每个齿轮...

d3.selectAll(".st6")
  .transition()
  .delay(function(d, i, n) { return i * 50; })
  .on("start", function repeat() {
      d3.active(this)
        .transition()
        .duration(2500)
        .attr('transform', 'rotate(0)')
        .transition() //And rotate back again
        .duration(2500)
        .attr('transform' , 'rotate(90) ')
        .on("start", repeat); //at end, call it again to create infinite loop
  });

但是当我尝试使用为我重复旋转文本的相同代码时，图像变得静止并且不再移动......

这是为我重复旋转文本的代码...

var width = 600;
var height = 300;
    
var holder = d3.select("body")
.append("svg")
.attr("width", width)    
.attr("height", height); 
    
//draw the text
holder.append("text")
  .style("fill", "black")
  .style("font-size", "56px")
  .attr("dy", ".35em")
  .attr("text-anchor", "middle")
  .attr("transform", "translate(300,150) rotate(0)")
  .text("Hi, how r u doing");
    
var i = 0;
var timeInterval = 10;
setInterval(function(){
    i += 1;
    update(i % 360) 
}, timeInterval);
    
var n;
// update the element
function update(n) {
    // rotate the text
    holder.select("text")
      .attr("transform", "translate(300,150) rotate("+n+")");
}

这是我尝试复制上述方法但无济于事...

var width = 600;
var height = 300;
    
var holder = d3.select("body")
  .append("svg")
  .attr("width", width)    
  .attr("height", height); 
    
holder.append("svg:image")
  .attr("image-anchor", "middle")
  .attr("xlink:href", "produc.svg")
  .attr("transform", "translate(300,150) rotate(0)")
// Initial starting angle of the text
    
var i = 0;
var timeInterval = 10;
setInterval(function(){
    i += 1;
    update(i % 360) 
},timeInterval);
    
    
var n;
// update the element
function update(n) {
    // rotate the text
    holder.select("text")
      .attr("transform", "translate(300,150) rotate("+n+")");
}

这是 CodePenclick here 上的一个工作示例

Answer 1

至于你的代码的问题（不考虑是不是“一锤定音”）：

您正在使用旋转文本的工作代码，而不是完全更新它以反映您现在正在处理图像。您已更新 append 语句以附加图像，但尚未更新 update 函数以选择该图像 - 它仍在寻找文本元素：

function update(n) {
    // rotate the text
    holder.select("text")
      .attr("transform", "translate(300,150) rotate("+n+")");
}

由于不再有文本元素，此函数不会选择任何内容，因此不会设置任何元素的变换。如评论中所述，您需要选择图像：

function update(n) {
    // rotate the text
    holder.select("image")
      .attr("transform", "translate(300,150) rotate("+n+")");
}

如下图：

var width = 600;
var height = 300;
    
var holder = d3.select("body")
  .append("svg")
  .attr("width", width)    
  .attr("height", height); 
    
holder.append("svg:image")
  .attr("image-anchor", "middle")
  .attr("xlink:href", "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/compass.svg")
  .attr("transform", "translate(200,20) rotate(0)")
  .attr("width", 100)
// Initial starting angle of the text
    
var i = 0;
var timeInterval = 10;
setInterval(function(){
    i += 1;
    update(i % 360) 
},timeInterval);
    
// update the element
function update(n) {
    // rotate the text
    holder.select("image")
      .attr("transform", "translate(200,20) rotate("+n+",50,50)");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>