Question

所以我正在关注D3JS的这个教程，我过去曾使用过一些javascript，但我真的想扩大视野，学习如何制作这些非常棒的数据驱动网站。此外，我目前正在一个将来需要DDD模型的地方工作，我希望能够在发生这种情况时加快速度。但是，在遵循本教程时，我遇到了这个疯狂的错误

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

在我的检查控制台中并且没有在页面上呈现任何内容（显然是因为它没有正确获取显示任何内容所需的数据），我尝试删除类型函数并在文本和文本中返回值使用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

Answer 1

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

错误：＆lt;＆＃34; rect＆＃34;＆gt;的值=＆＃34; NaN＆＃34;，错误：＆lt;＆＃34; text＆＃34;＆gt;的值=＆＃34; Nan＆＃34;

1 个答案: