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

Question

我正在Raphael.js某种图形，我首先使用D3（ 可在此处找到 ）制作，但在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"));
    });

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

Answer 1

问题是

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

因此所做的更改是

填充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。 ）