javascript - 向Raphael.js文本元素添加其他数据

我正在使用Raphael.js中的某种图形进行工作，我首先使用D3（which can be found here）进行了绘制，但是在Internet Explorer中效果不佳。我听说Raphael.js在IE中做得更好。

因此，现在我尝试将我的D3代码转换为Raphael，虽然取得了一些进展，但是在尝试向文本元素添加其他数据或id时遇到了一些问题，可以用来修改文本的具体元素。在D3中，我在文本元素上使用了.attr("weight", weight)，这很好用。但是在Raphael中，我无法正常工作。

我尝试给文本提供如下ID：

var text = paper.text((y * 50) + 20, (i * 50) + 15, weight).attr({
        fill: '#000'
    });
    text.attr({
        "font-size": 16,
            "font-family": "Arial, Helvetica, sans-serif"
    });

    text.id = weight;

但是登录该ID仍然不走运。如果不清楚为什么我需要此ID，请检查前面用D3制作的jsFiddle，我需要获取一个特定的元素来更改其文本。

var grossRisks = [{
"weight": "1",
    "number": "5"
 }, {
 "weight": "4",
    "number": "6"
 }];

function populateChart(riskArray) {
var element = document.getElementsByTagName("text"),
    attr;
var loops = riskArray.length;
for (var i = 0; i < loops; i++) {
    var obj = riskArray[i];

    for (var x = 0; x < element.length; x++) {
        attr = element[x];
        if (/^text/.test(attr.nodeName)) {
            console.log(
                "Weight: " + attr.getAttribute("weight"));
            if (attr.getAttribute("weight") == obj.weight) {
                attr.textContent = obj.number;
            }
        }
    }
}

我已经尝试了多种操作，例如创建一个新集合并向该集合添加数据，但是我不知道从那一点开始，例如如何更改具有特定ID的集合的文本？

newSet[i] = paper.set();
    newSet[i].push(rect, text);

    newSet[i].attr({
        cursor: 'pointer'
    }).data('weight', weight);

    newSet[i].click(function () {
         console.log(this.id("weight"));
    });

Raphael的无效代码可以在此jsFiddle中找到。

最佳答案

问题是


您得到原始的DOM节点，而不是RaphaelJS包装的对象（因为您使用document.getElementsByTagName）
您设置了data，但尝试通过attr访问它。
在小提琴中，由于您使用了从1到5的newSet变量，因此i的构建不正确。计算两个循环计数器所需的索引。


因此所做的更改是

填充newSet时

var index = (i*5) + y;
newSet[index] = paper.set();

清除和填充图表时，请使用newSet

newSet[x].forEach(function(item){
    if (item.type=='text')
        attr=item;
});

获取文本节点。
的工作演示请看http://jsfiddle.net/G94sQ/22/



您当然可以使用id简化代码

要分配id，只需使用text.id = 'your-id'

创建newSet时

text.id = 'weight-'+weight;

以及清理/填充时

attr = paper.getById('weight-'+obj.weight);

http://jsfiddle.net/G94sQ/23/上的工作演示

（另外：您正在使用jquery 1.11，其中的.toggle方法仅显示/隐藏元素，而不会旋转click函数作为早期版本。因此，为了快速解决，我将代码更改为1.4.2。）