Изображение не отображается на iPad d3js

Я использую d3js вместе с AngularJS в iPad webapp. При работе в 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:

Странная вещь - iPad знает, что там есть элементы, потому что она позволяет мне выделять и нажимать на них, но она не отображает изображения.

1 ответ

Оказывается, все, что мне нужно было сделать, - это преобразовать образ в строку base 64. Поэтому я просто установил строку как var и имел xlink: href, указывающий на var вместо местоположения. например:

var image1 = "data:foobase64stringhere";

.attr('xlink:href',image1)

licensed under cc by-sa 3.0 with attribution.