NS_错误\u在jquery之后绘制dimple.js图表时在Firefox中失败

我正在试着画一个dimple.js svg条形图，它嵌套在jQueryUI选项卡和accordeon中，我将其用于我的网站布局，我感到非常绝望。在Chrome和IE中一切正常，但FF不断抛出NS\u错误\u失败异常。以下是代码片段：

function drawDimpleChart(){
  d3.json("synkon-dat.php", function (data) {
    var svg = dimple.newSvg("#graph-txttypy-d3", 590, 400);     
    var myChart = new dimple.chart(svg, data); 
    myChart.setBounds(100, 70, 480, 150);
    myChart.addPctAxis("x", "ratio");  
    myChart.addCategoryAxis("y", "kategorie");  
    myChart.addSeries("varianta", dimple.plot.bar);       
    myChart.addLegend(200, 10, 380, 20, "right"); 
    myChart.draw();
  }); 
}

$(document).ready(function() { 
  $("#tabs").tabs();
  $(".accordion").accordion({ active: 'none', clearStyle: true });
  drawDimpleChart();
});

我意识到这个问题与jquery和绘图函数的执行顺序有关。当我在.draw方法之后的回调中调用jquery时，一切都正常，但我确实需要在所有数据返回之前显示选项卡（这可能需要一些时间）

---

请帮助，我遗漏了什么？

这里有一个JSFIDLE，可以根据dimple主页上的简单示例复制问题（在这个示例中，图表位于选项卡2）：

问题与此处的问题有关：

Dimple在SVG上进行了大量测量，当div（因此SVG）被隐藏时，这是不可能的。在除firefox以外的浏览器中，标签对齐会出错，但firefox会抛出NS_ERROR_FAILURE错误

解决方案是绘制到可见div，并在绘制完成后立即将其移动到隐藏div中。您可以看到它在这把小提琴中工作：

function drawDimpleChart(){
    var svg = dimple.newSvg("#chartTab", 600, 400);
    var data = [
        { "Word":"Hello", "Awesomeness":2000 },
        { "Word":"World", "Awesomeness":3000 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.bar);
    chart.draw();
    $("#chartTab").appendTo("#tabs-2");
}

$(document).ready(function() { 
    $("#tabs").tabs();
    drawDimpleChart();
});

我希望这有帮助

---

John

我也遇到了同样的问题，一个隐藏的选项卡在FF中抛出了错误。为了解决Firefox中的图表渲染问题，我（1）延迟了对draw函数的调用（例如，

setTimeout（chart.draw（），2000）；

）和（2）切换到像素维度（例如，

chart.setBounds（10,10,90,90））

，以解决Firefox中另一个阻止图例正确显示的问题。

嗨，John，非常感谢您的解决方案，它现在可以工作了！解决这个问题使你们的图书馆对我们的学术项目非常有价值。最好的问候，MartinI也有同样的问题，通过加载SVGT后隐藏元素的解决方案解决了。这是一个很好的答案，解释了发生了什么。关键是firefox在测量时不喜欢隐藏的SVG元素。所以它适用于我遇到的一个完全不同的问题：我搞乱了Susie Lu的d3注释库，产生了悬停显示效果。Firefox与

display:none

混淆，但是

visibility:hidden

工作得很好。

function drawDimpleChart(){
    var svg = dimple.newSvg("#chartTab", 600, 400);
    var data = [
        { "Word":"Hello", "Awesomeness":2000 },
        { "Word":"World", "Awesomeness":3000 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.bar);
    chart.draw();
    $("#chartTab").appendTo("#tabs-2");
}

$(document).ready(function() { 
    $("#tabs").tabs();
    drawDimpleChart();
});