Question

我正在使用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中可以找到{{1}}的无效代码。

Answer 1

问题是

您获得原始DOM节点，而不是RaphaelJS包装对象（因为您使用document.getElementsByTagName ）
您设置了data，但尝试通过attr访问它。
在小提琴中，newSet未正确构建，因为您使用从1到5的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方法只显示/隐藏元素并且不会旋转{{ 1}}功能与早期版本一样。所以我将代码更改为1.4.2作为快速修复.. ）

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

1 个答案: