Question

我正在尝试使用d3.js库来获取带有附加图像的元素;我成功实现了这一点，只是使用了一个简单的圆圈，在屏幕上很好地转换了但是现在我已经添加了一个png，转换不会发生 - 虽然刷新页面时png确实出现，但它不会像它以前做过！我的代码在下面..感谢您的帮助！

    <script>

var data = [60, 120, 40, 710, 560, 850];
var data1 = data[0];

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

        var imgs = canvas.append("image")
            .attr("xlink:href", "AWT-Bus.png")
            .attr("x", "60")
            .attr("y", "60")
            .attr("width", "20")
            .attr("height", "20")
            .attr("cx", 50)
            .attr("cy", 200)
            .attr("r", 20)
            ;

        imgs.transition()
            .duration(data1*100)
            .delay(2000)
            .attr("cx", 200)
            .transition()
            .attr("cx", 50)
            .attr("cy", 200)
            .transition()
            .attr("cx", 150)
            .attr("cy", 300)
            ;

Answer 1

您在代码中更改的属性（cx和cy）适用于由其中心（cx和cy）的x和y坐标加上半径（r）描述的圆。这就是你的圈子示例有用的原因。

但是图像的宽度，高度以及框左上角的x和y坐标（使用x和y属性如下所示）来描述。

不同的svg元素具有描述其尺寸及其在页面上的位置的不同属性，因此您需要了解每种元素类型具有的不同属性，可能使用https://developer.mozilla.org/en-US/docs/Web/SVG/Element等引用。然后，您可以使用转换为svg元素设置动画，就像在代码中完成并更改相应属性的值一样。

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

var imgs = canvas.append("image")
  .attr("xlink:href", "AWT-Bus.png")
  .attr("x", "60")
  .attr("y", "60")
  .attr("width", "20")
  .attr("height", "20");

imgs.transition()
  .duration(2000)
  .delay(1000)
  .attr("x", 200)
  .transition()
  .attr("x", 50)
  .attr("y", 200)
  .transition()
  .attr("x", 150)
  .attr("y", 300);

在d3中向DOM元素添加了图像，但现在它不会转换

1 个答案: