脚本功能在 Chrome 中运行一次但在 Firefox 中运行良好答案

【问题标题】：Script function on running once in Chrome but works fine in Firefox脚本功能在 Chrome 中运行一次但在 Firefox 中运行良好
【发布时间】：2013-06-06 16:23:04
【问题描述】：

我正在使用 NVD3 制作几个图表。我在 addGraph 函数中添加了一个 console.log，它添加了一个特定的图形。

我想知道我的代码是否有问题？我是否正确使用图书馆？我不知道从哪里开始解决这个问题。

FIREFOX（所有图表都正常显示）

总共 444 此处调用添加图

总共 518 此处调用添加图

总计 572 此处调用添加图

总共 553 此处调用添加图

总共 617 此处调用添加图

总共 595 此处调用添加图

谷歌浏览器

总NaN

此处调用添加图共 108 个

总共 138 个

总共 145 个

总共 146 个

代码

调用脚本

<script src="../../../data/novus/lib/d3.v2.js"></script>
<script src="../../../data/novus/nv.d3.js"></script>
<script src="../../../data/novus/src/tooltip.js"></script>
<script src="../../../data/novus/src/models/legend.js"></script>
<script src="../../../data/novus/src/models/axis.js"></script>
<script src="../../../data/novus/src/models/scatter.js"></script>
<script src="../../../data/novus/src/models/line.js"></script>
<script src="../../../data/novus/src/models/multiChart.js"></script>

在循环中

<script src="../../../data/novus/nv.d3.js"></script>
<script>
    var impressions = [];
    var clickrate = [];
    var trial_impressions = [];
    var trial_clickrate = [];
    var testdata = [{
        "key" : "Impressions",
        "type" : "line",
        "values" : impressions,
        "yAxis" : 1
    }, {
        "key" : "Clicks",
        "type" : "line",
        "values" : clickrate,
        "yAxis" : 2
    }, {
        "key" : "T Impressions",
        "type" : "line",
        "values" : trial_impressions,
        "yAxis" : 1
    }, {
        "key" : "T Clicks",
        "type" : "line",
        "values" : trial_clickrate,
        "yAxis" : 2
    }].map(function(series) {
        series.values = series.values.map(function(d) {
            return {
                x : d[0],
                y : d[1]
            }
        });
        return series;
    });
    var chart;

    nv.addGraph(function() {
        console.log("Add");
        chart = nv.models.multiChart().margin({
            top : 30,
            right : 60,
            bottom : 50,
            left : 70
        }).x(function(d, i) {
            return i
        }).color(d3.scale.category10().range());

        chart.xAxis.tickFormat(function(d) {
            var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
            if ( typeof (dx) == undefined || d > 1000) {
                dx = new Date(d);
            } else {
                dx = new Date(dx);
            }
            return dx ? d3.time.format('%x')(dx) : '';
        });

        chart.yAxis1.tickFormat(d3.format(',.1f'));
        v

        chart.yAxis2.tickFormat(d3.format(',.4f'));

        d3.select('#chart1<?= $chartID?> svg').datum(testdata).transition().duration(500).call(chart);
        return chart;
    });

</script>

调用图表的div

<div id='chart1<?= $chartID?>' style="width:1110px;height:300px;font-size:11px;margin-top:5px">
    <svg></svg>
</div>

【问题讨论】：

这段代码很有帮助。
您也需要发布用于生成这些结果的代码 - 否则我们不知道您是否做错了什么
您是否能够让 NVD3 网站上的 MultiBarChart 示例正常工作？
是的，我有，当我尝试渲染多个图形时，它只在 firefox 上运行良好。

标签： javascript cross-browser d3.js nvd3.js

【解决方案1】：

我最好的猜测是对这些数字进行了数学计算。在女巫的情况下，使用函数 parseFloat() 可以将字符串转换为数字，以便正确完成数学计算。

【讨论】：