Question

我正在使用d3.v3.js进行转换。我现在正在做的是加载一个矩形，它将成为某些文本的背景。问题是在IE中，当我单击包含文本的svg区域时，文本消失...有时候。有时它只是闪烁，有时点击一堆会带回文本。

在IE中使用调试器我发现检查影响文本的CSS（＆＃34;行高＆＃34;，＆＃34;字体大小＆＃34;等）会带回文本而这个错误似乎不再显露出来。我尝试在Edge，10,9中运行它，但没有运气。

我在chrome或firefox中没有任何问题。

我也在使用bootsrap css和javascript。

这是我为定位文本和定义内容所做的功能。

function infoTextGen(svg,data, containerHeight){
var dat = [];
var type = [
    "Airline: ",
    "System Provider: " ,
    "Partner Type: ",
    "ITCI: ",
    "Interline Baggage: ",
    'Interline E-Ticket: ',
    'Infant E-Ticket: ',
    'Codeshare: ',
    'Ground Handling: ',
    'Seamless Availability Interline: ',
    'AVA Codeshare: ',
    'Direct Sell Interline: ',
    'Seamless Availability Codeshare: ',
    'Direct Sell Codeshare: ',
    'Seat Maps: ',
    'Interline Interactive Seat Assignment: ',
    'Codeshare Interactive Seat Assignment: ',
    'FFP Redeem: ',
    'FFP Earn: ',
    'PNR View: ',
    'Full Itinerary: ',
    'Direct Access: ',
    'CTO Link: '
];
var widths =[];
function pType(name){
    var text="";
    text.fontsize(12);
    if(name === "ST"){
        text = "SkyTeam";
    }
    else if(name === "TCI"){
        text =  "ITCI";
    }
    else if(name === "GH"){
        text =  "Ground Handled";
    }
    else if(name === "JV"){
        text = "Joint Venture";
    }
    else if(name === "ALL"){
        text ="Alliance";
    }
    else if(name === "JV/ST"){

        text = "Joint Venture/SkyTeam";
        text.fontsize(15);
    }
    else{text = name;}
    return text;
}




var yOrN = function(d){
    if(d=="Y" || d=="y"){
        dat.push(d);
    }

}
//Pulling information from
var name = data.Name;
dat.push(data.Airline);
dat.push(data.SystemProvider);
dat.push(pType(data.PartnerType));
yOrN(data.ITCI);
yOrN(data.ITB);
yOrN(data.IET);
yOrN(data.INFETKT);
yOrN(data.Codeshare);
yOrN(data.GroundHandling);
yOrN(data.SeamAvailIL);
yOrN(data.AVACodeShare);
yOrN(data.DirectSellInterline);
yOrN(data.SeamAvailCodeShare);
yOrN(data.DirectSellCodeshare);
yOrN(data.SeatMaps);
yOrN(data.IntInrSeatAssm);
yOrN(data.CSInrSeatAssm);
yOrN(data.FFPB);
yOrN(data.FFPE);
yOrN(data.PNRV);
yOrN(data.FULLITN);
yOrN(data.DIRACCS);
yOrN(data.CTOLINK);




var svgIn =
    //The Catagories of information
    svg.append("g")
        .attr("class","infoTitleGroup")
        .selectAll("text")
        .data(dat)
        .enter()
        .append("text")
        .attr("opacity","0")
        .attr("class",function(d,i) {
            if(i ==0){
                return "infoTitle";
            }
            return "infoType";
        })
        .text(function(d, i){
            if(d=="Y"){
                return type[i] +d+"es" ;
            }else if(i>0){
                return type[i]+d;
            }
            return d;

        })
        .attr("y", function(d,i){

            return (((i+1)*type.length)/containerHeight)*100 + "%" ;
        })
        .attr("x","10");
return svgIn;

}

这是运行转换以显示文本

的代码

infoTextGen(svgInfo,data,590);
   infoTitles = d3.selectAll(".infoType");

   infoTitles.transition()
      .delay(function(d,i){
         return i*20 + 2000;
    })
    .duration(500)
    .attr("opacity","1");

这是矩形的代码

 rectInfo.transition()
    .duration(500)
    .attr("opacity","1")
    .attr("fill","DarkSeaGreen")
    .transition()
    .delay(501)
    .duration(500)
    .attr("y",".5%")
    .transition()
    .delay(1002)
    .duration(500)
    .attr("width",divSizeInfo-10)
    .attr("x",".5%")
    .transition()
    .delay(1503)
    .duration(500)
    .attr("height","590");

Answer 1

我有一个JSFiddle来帮助测试它，虽然它没有使用SVG库：https://jsfiddle.net/f3oyqt2o/11/

将鼠标悬停在IE11底部的框中，SVG的文本元素无缘无故消失。

所以我认为它不仅仅是d3，而是一个涉及SVG元素的错误，它被拉伸以适应IE11中的容器。 SVG的内容将按预期保持正确的宽高比和中心，但由于某种原因，文本并不总是正常工作。在此状态下，如果页面上的某些内容发生更改，则可能导致SVG文本消失。

为了解决这个问题，我根据情况做了各种尴尬的事情。在大多数情况下，似乎IE11中最稳定的SVG是其容器的高度更具体的尺寸。使用百分比和flex-grow: 1之类的Flex属性似乎不起作用。如果我找到一个好的解决方案，我一定会更新。想法？

Answer 2

添加css属性指针event：none; svg元素似乎为我解决了。

pointer events: none

当我在IE中点击它时，我的svg文本消失了

2 个答案: