= "NaN", 错误:值 <"text"> = "Nan"-6ren"> = "NaN", 错误:值 <"text"> = "Nan"-所以我正在学习这个 D3JS 教程，我过去使用过一些 javascript，但我真的很想拓宽我的视野并学习如何制作这些真正很棒的数据驱动网站。另外，我目前工作的地方将来需要 DDD 模型，我希望在这种-6ren">
个人中心
gpt4 book ai didi

javascript - 错误 : value of <"rect"> = "NaN", 错误:值 <"text"> = "Nan"

转载 作者：行者123 更新时间：2023-12-03 12:05:34 25 4
gpt4 key购买 nike

所以我正在学习这个 D3JS 教程，我过去使用过一些 javascript，但我真的很想拓宽我的视野并学习如何制作这些真正很棒的数据驱动网站。另外，我目前工作的地方将来需要 DDD 模型，我希望在这种情况发生时能够跟上进度。然而，在遵循本教程时，我遇到了这个疯狂的错误

Error: value of <"rect"> = "NaN", Error:Value of <"text"> = "Nan"

在我的检查控制台中，页面上没有呈现任何内容(显然是因为它没有正确获取显示任何内容所需的数据)，我尝试删除 type 函数并在文本和返回值上使用 parseInt rect，以及保留类型函数并仅解析该值并返回它，但似乎没有任何效果。我正在使用 tsv 来获取数据，并完成了教程中所说的所有操作。只是为了咯咯笑，我想嗯，我有一个错误，让我试试他们的代码。所以我将他们的代码复制粘贴到我的代码块中(不仅仅是引发错误的部分，而是整个事情!!!)，并得到了与我的相同的错误......哈哈哈哈哈哈现在我只想知道发生了什么以便我可以修复它并继续我的条形图盛宴。有什么想法吗？？？

<!DOCTYPE html>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Stacked Bar Graph</title>
 <script src="http://d3js.org/d3.v3.min.js"></script>

<div class="chart">
<script>        
    d3.tsv("data.tsv", type, function(data) {           
        var width = 420, 
            barHeight = 20;         
        var x = d3.scale.linear()
            .range([ 0, width ])
            .domain([ 0, d3.max(data, function(d) {
            return d.value;
        }) ]);
        var chart = d3.select(".chart")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
        var bar = chart.selectAll("g")
            .data(data)
            .enter()
            .append("g")
                .attr("transform", function(d, i) {
                    return "translate(0," + i * barHeight + ")";
                });
        bar.append("rect").attr("width", function(d) {
            return x(d.value);
        }).attr("height", barHeight - 1).attr("fill", "steelblue");

        bar.append("text").attr("x", function(d) {
            return x(d.value) - 3;
        }).attr("y", barHeight / 2).attr("dy", ".35em").attr("fill",
                "white").attr("font", "10px san-serif").attr("text-anchor",
                "end").text(function(d) {
            return d.value;
        });
    });     
    function type(d) {
        d.value = +d.value;
        return d;
    }
</script>
</div>

data.tsv 文件

name    value
Locke   4
Reyes   8
Ford    15
Jarrah  16
Shepard 23
Kwon    42

最佳答案

确保 TSV 中的值以制表符分隔，而不是空格。

关于javascript - 错误 : value of <"rect"> = "NaN", 错误:值 <"text"> = "Nan"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25206906/

25 4 0
文章推荐： javascript - 如何加载库？
文章推荐： javascript - 重复调用 JavaScript 函数会产生冲突
文章推荐： javascript - 异步请求附加到 Angular 中的字符串
文章推荐： c# - 使用 Knockout 从