Question

我在iPad webapp中使用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知道那里有元素，因为它允许我突出显示并点击它们，但它不显示图像。

Answer 1

原来我要做的就是convert image to base 64 string。所以我只是将字符串设置为var并让我的xlink：href指向var而不是位置。例如：

var image1 = "data:foobase64stringhere";

.attr('xlink:href',image1)

iPad d3js上没有显示图像

1 个答案: