0

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

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);
};

如何处理？

4

2 回答 2

0

这里有一些奇怪的地方。首先，为什么在 (3) 中您要尝试在点击处理程序中添加点击处理程序？可能每次点击都被 SVG 点击处理程序拦截，而您所做的只是替换 rect 点击处理程序。

为什么不一开始就添加点击处理程序<rect>呢？追加时将处理程序添加到 newElement。

于 2013-09-04T15:43:02.880 回答
0

查看您的第一次尝试：

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）传递到鼠标事件中。

于 2013-09-04T15:47:22.647 回答