用凹坑/d3 js 绘制零结果 NaN答案

【问题标题】：Plotting zeros with dimple/d3 js results NaN用凹坑/d3 js 绘制零结果 NaN
【发布时间】：2023-09-25 11:18:01
【问题描述】：

我遇到了一个相当有趣的问题。每次我尝试绘制一个只包含零的 csv 文件时，我都会得到：

 d3.v4.min.js:2 Error: <g> attribute transform: Trailing garbage, "translate(0, NaN)".

我一开始一直认为它来自dimple js 或来自我的csv 数据，但我在其中找不到任何错误。最有趣的是，我用 jsfiddle 对其进行了测试，它工作正常（link to fiddle），但是，完全相同的代码在小提琴之外对我不起作用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.min.js"></script>

<pre id="data">
Value,Year
0,2009
0,2010
0,2011
0,2012
0,2013
0,2014
0,2015
0,2014
0,2014
0,2012
0,2015
0,2010
0,2011
0,2013
</pre>

<body>

<div id="chartContainer" style="height: 80%">
<script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 600, 400);
    var data = d3.csvParse( d3.select("pre#data").text() );

    var chart = new dimple.chart(svg, data);
    var x = chart.addCategoryAxis("x", "Year");
    x.addOrderRule("Year");
    var y = chart.addMeasureAxis("y", "Value");
    chart.addColorAxis("Value", ["green", "yellow", "red"]);
    var lines = chart.addSeries(null, dimple.plot.line);
    lines.lineWeight = 4;
    lines.lineMarkers = true;
    chart.ease = "bounce";
    chart.staggerDraw = true;
    chart.draw(2000);
</script>
</div>

</body>
</html>

当我使用代码时出现以下错误：

错误：属性转换：尾随垃圾，“translate(0, NaN)”。

错误：属性 y：预期长度，“NaN”。

错误：属性 d：预期数字，“M94.3,NaNL162.9,NaNL23...”。

错误：属性 cy：预期长度，“NaN”。

【问题讨论】：

它不是完全相同的小提琴。检查我的ps

标签： javascript d3.js dimple.js

【解决方案1】：

PS 应该先写的：

你有没有检查（！）你给那个小提琴链接的资源？？？？？？它使用 d3.v3.min.js，而在您的情况下，您使用的是 d3.v4。很明显，d3.v4 的凹坑 2.3.0 无法处理所有零情况。

我想我发现了你的问题，我用你的 html 玩了一下，~~我怀疑你实际上在 jsfiddle 中也遇到了同样的错误，但是你没有看到它~~。奇怪的是，图书馆处理所有的 0，但不是没有本地的。

如果您更改数据有点像最小值和 0 以外的最大值，那么您的库可以绘图。

我怀疑您的库正在尝试通过执行 (value-min)/(max-min) 来扩展数据，它给您 0/0 因此 NaN。更改 pre 可以缓解它：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.min.js"></script>

</head>

<body>
<pre id="data">
Value,Year
1,2009
0,2010
0,2011
0,2012
0,2013
0,2014
0,2015
0,2014
0,2014
0,2012
0,2015
0,2010
0,2011
10,2013
</pre>
<div id="chartContainer" style="height: 80%"></div>
<script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 600, 400);
    var data = d3.csvParse( d3.select("pre#data").text());
    data.forEach(function(d,i){d.Value = +d.Value;d.Year = +d.Year});
    data.sort(function(a,b){return a.Year - b.Year});
    console.log(data);
    console.log(typeof data);
    setTimeout(function(d,i){
        var chart = new dimple.chart(svg, data);
        var x = chart.addCategoryAxis("x", "Year");
        x.addOrderRule("Year");
        var y = chart.addMeasureAxis("y", "Value");
        chart.addColorAxis("Value", ["green", "yellow", "red"]);
        var lines = chart.addSeries(null, dimple.plot.line);
        lines.lineWeight = 4;
        lines.lineMarkers = true;
        chart.ease = "bounce";
        //chart.staggerDraw = true;
        chart.draw(2000);
    },3000)
</script>
</body>
</html>

【讨论】：