Question

我已经开始使用svg进行可视化。它是一个简单的柱形图，并且工作得很好。我正在从外部XML文件加载数据并显示柱形图。现在我想添加一个悬停效果，它会在悬停列时改变条形的颜色。所以问题是我如何将一个eventhandler添加到先前生成的svg元素。我尝试了不同的方法：（1）生成试图添加eventhandler的元素时：

newElement.onmouseclick="highlightOn(this)";

（2）添加事件处理程序这可能是更高级的方式我不知道如何选择在SVG中触发事件的正确元素。

newElement.addEventListener("mouseover", highlightOn, false)

（3）某个论坛显示这是一种可能性（也不起作用：contentDocument返回null）

theSVG.addEventListener("click", function(){
    console.log("svg hovered");
    var svgDoc = theSVG.contentDocument; //get the inner DOM of alpha.svg
    console.log(svgDoc);
    var allColums= svgDoc.getElementsByTagName("rect");
    for (var i = 0; i < allColums.length; i++) {
        allColums[i].addEventListener("click", function(){
            console.log("clicked!"); })
    };

});

总而言之，我很困惑，不知道如何继续。以下是我如何生成svg：

for (var i = 0; i < allLogs.length; i++) {
    //reading data
    date        =allLogs[i].getElementsByTagName("date")[0].firstChild.data;
    console.log("date "+date);
    time5000m   =allLogs[i].getElementsByTagName("TimeFivethousandMeter")[0].firstChild.data;
    if (time5000m==" ") {time5000m=0;};
    console.log("time 5000m"+time5000m);
    //adding data to SVG
    //>> colum
    var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'rect'); //Create a rect in SVG's namespace
    newElement.setAttribute("width",width); 
    newElement.setAttribute("height",time5000m*scaleFactor); 
    var xPos=width*i+i*offset+sideMargins/2;
    newElement.setAttribute("x",xPos); 
    var yPos=height-time5000m*scaleFactor-verticalMargin/2;
    newElement.setAttribute("y", yPos);
    newElement.style.fill = "#cf004e"; //Set fill colour
    newElement.style.opacity="0.75";
    theSVG.appendChild(newElement);
};

如何处理？

Answer 1

这里有一些奇怪的事情。首先，为什么在（3）中你试图在点击处理程序中添加点击处理程序？可能是每次点击都被SVG点击处理程序拦截，你所做的就是替换直接点击处理程序。

为什么不首先在创建每个<rect>时添加点击处理程序？在追加它时将处理程序添加到newElement。

Answer 2

看着你的第一次尝试：

newElement.onmouseclick="highlightOn(this)";

您有一个错误：onmouseclick应该是onclick

我在鼠标事件中使用this时遇到了麻烦，所以我用过的最好的方法是为有问题的元素设置一个ID，然后使用辅助函数分配给onlick，所以添加类似于你的元素创建循环：

var id = 'el'+i;
newElement.id = id;
newElement.onclick = funcHighlightOn(id);

然后，使用这样的函数来分配onclick动作：

function funcHighlightOn(id) {
   return function() {
      highlightOn(id);
   }
}

上述奇怪的原因是，当以这种方式分配时，很难将参数（在这种情况下，元素的ID）传递给鼠标事件。

以编程方式将事件处理程序分配给svg元素

2 个答案: