图像不显示在iPad d3js

Image not showing on iPad d3js

本文关键字：iPad d3js 显示 图像      更新时间：2023-09-26

我在iPad web应用中使用d3js和AngularJS。当在Safari/Chrome上运行时，一切看起来都很好，但在iPad上运行时，我用d3js附加的图像不显示。

这是我的JS:

directive('zoomScreen', [function() {
    return{   
    restrict: 'E',
    link: function(scope, elm, attrs) {   
    var width = 1024,
    height = 660;
var offset= [{"xoff":-20,"yoff":10,"swipe_class":"left"},{"xoff":-80,"yoff":0,"swipe_class":"right"},{"xoff":0,"yoff":-80,"swipe_class":"left"},{"xoff":50,"yoff":0,"swipe_class":"left"}];
var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g");
var back = svg.append("image")
         .attr("class", "logo")
         .attr("x", 375)
         .attr("y", 175)
         .attr("xlink:href", "../images/brain-back.png")
         .attr("height", 300)
         .attr("width", 300)
         .style("fill", "transparent")
         .style("stroke", "black")     
         .style("stroke-width", 1)
         .on("click", outClicked);
var image = svg.append("image")
         .attr("class", "logo")
         .data([offset[0]])
         .attr("x", 485)
         .attr("y", 175)
         .attr("height", 90).attr("width", 90)
         .attr("xlink:href", "../images/image1.png") 
         .style("stroke", "black")     
         .style("stroke-width", 1)
         .on("click", clicked);
var image2 = svg.append("image")
         .attr("class", "logo")
         .data([offset[1]])
         .attr("x", 545)
         .attr("y", 255)
         .attr("height", 90).attr("width", 90)
         .attr("xlink:href", "../images/image2.png")    
         .style("stroke", "black")     
         .style("stroke-width", 1)
         .on("click", clicked);

我的HTML:

<zoom-screen>
<svg class="accel"></svg>
</zoom-screen>

奇怪的是iPad知道那里有元素，因为它允许我高亮显示并点击它们，但它不显示图像

我所要做的就是将图像转换为64进制字符串。所以我只是将字符串设置为var，并让我的xlink:href指向var而不是位置。例:

var image1 = "data:foobase64stringhere";
.attr('xlink:href',image1)
相关文章：