javascript - 无法读取未定义的属性 'getHours'-6ren

javascript - 无法读取未定义的属性 'getHours'

转载作者：行者123 更新时间：2023-11-29 17:50:30

29

4

我正在尝试使用 json 格式的一些财务数据构建一个简单的条形图。

当我尝试使用我解析的时间时，出现了这个奇怪的错误弹出窗口。当我控制日志时，它显示要解析的数据正常 - 它不返回 null 或任何东西。

d3.v3.min.js:1 Uncaught TypeError: Cannot read property 'getHours' of undefined
    at H (d3.v3.min.js:1)
    at SVGTextElement.t (d3.v3.min.js:1)
    at SVGTextElement.arguments.length.each.function.n.textContent (d3.v3.min.js:3)
    at d3.v3.min.js:3
    at Y (d3.v3.min.js:1)
    at Array.Co.each (d3.v3.min.js:3)
    at Array.Co.text (d3.v3.min.js:3)
    at SVGGElement.<anonymous> (d3.v3.min.js:5)
    at d3.v3.min.js:3
    at Y (d3.v3.min.js:1)

很难解决这个问题，因为我无法理解我的代码的哪一部分导致了这个问题，因为它指向 d3.v3.min.js。我认为问题出在 d3.extent 中，因为我用它来替换 x 轴的 d3.max。

这是给出错误的代码:

<!DOCTYPE html>
<meta charset="utf-8">

<head>
    <style>

    .axis {
      font: 10px sans-serif;
    }

    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

    </style>
</head>

<body>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%H:%M:%S.%L").parse;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%H:%M:%S.%L"));

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

d3.json("https://gist.githubusercontent.com/kvyb/cba0e652b7fd9349604cf45ced75fbf9/raw/3f824e76c38479a1a327abbb5c85a5962fec6f21/schudata.json", function(error, data) {

    data["bboList"].forEach(function(d) {
        d.timeStr = parseDate(d.timeStr);
        d.value = +d.ask;
        console.log(d.timeStr)
    });

  x.domain(d3.extent(data, function(d) { return d.timeStr; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Value ($)");

  svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x(d.timeStr); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });

});

</script>

</body>

附言

还有另一个问题超出了这个问题的范围，但需要包括在内。

为了让条形图也被替换

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

与

var x = d3.time.scale().range([0, width]);

并将条形的宽度更改为固定值。

最佳答案

I assume that the problem is in d3.extent...

是的，你是对的，解释很简单:d3.extent 接受一个array 作为第一个参数。但是，您的数据 不是一个数组，而是一个具有两个属性(每个属性都有一个数组)的对象。

因此，您应该选择其中之一来设置您的域(以及您的栏的数据):

x.domain(d3.extent(data["bboList"], function(d) {
    return d.timeStr;
}));
y.domain([0, d3.max(data["bboList"], function(d) {
    return d.value;
})]);

这是您的工作代码:

var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%H:%M:%S.%L").parse;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%H:%M:%S.%L"));

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

d3.json("https://gist.githubusercontent.com/kvyb/cba0e652b7fd9349604cf45ced75fbf9/raw/3f824e76c38479a1a327abbb5c85a5962fec6f21/schudata.json", function(error, data) {

    data["bboList"].forEach(function(d) {
        d.timeStr = parseDate(d.timeStr);
        d.value = +d.ask;
    });

  x.domain(d3.extent(data["bboList"], function(d) { return d.timeStr; }));
  y.domain([0, d3.max(data["bboList"], function(d) { return d.value; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Value ($)");

  svg.selectAll("bar")
      .data(data["bboList"])
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x(d.timeStr); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });

});

path, line {
  fill: none;
  stroke: black;
}

<script src="https://d3js.org/d3.v3.min.js"></script>

PS:请记住，我只是在回答您的问题(“无法读取未定义的属性‘getHours’”)。您在绘制这些条形图时仍然遇到一些问题。

关于javascript - 无法读取未定义的属性 'getHours'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44224784/

29

4

0

文章推荐： javascript - mouseenter/mouseleave 只工作一次

文章推荐： android - 通过绘制圆圈自定义饼图

文章推荐： javascript - $uibModal close($value) 回调总是返回 undefined

javascript 属性 .net 属性
你能比较一下属性吗我想禁用文本框“txtName”。有两种方式使用javascript，txtName.disabled = true 使用 ASP.NET，哪种方法更好，为什么？最佳答案我
VBS教程：属性-Count 属性
Count 属性返回一个集合或 Dictionary 对象包含的项目数。只读。 object.Count object 可以是“应用于”列表中列出的任何集合或对
VBS教程：属性-CompareMode 属性
CompareMode 属性设置并返回在 Dictionary 对象中比较字符串关键字的比较模式。 object.CompareMode[ = compare] 参数
VBS教程：属性-Column 属性
Column 属性只读属性，返回 TextStream 文件中当前字符位置的列号。 object.Column object 通常是 TextStream 对象的名称。
VBS教程：属性-AvailableSpace 属性
AvailableSpace 属性返回指定的驱动器或网络共享对于用户的可用空间大小。 object.AvailableSpace object 应为 Drive
VBS教程：属性-Attributes 属性
Attributes 属性设置或返回文件或文件夹的属性。可读写或只读（与属性有关）。 object.Attributes [= newattributes] 参数 object
VBS教程：属性-AtEndOfStream 属性
AtEndOfStream 属性如果文件指针位于 TextStream 文件末，则返回 True；否则如果不为只读则返回 False。 object.A
VBS教程：属性-AtEndOfLine 属性
AtEndOfLine 属性 TextStream 文件中，如果文件指针指向行末标记，就返回 True；否则如果不是只读则返回 False。 object.AtEn
VBS教程：属性-RootFolder 属性
RootFolder 属性返回一个 Folder 对象，表示指定驱动器的根文件夹。只读。 object.RootFolder object 应为 Dr
VBS教程：属性-Path 属性
Path 属性返回指定文件、文件夹或驱动器的路径。 object.Path object 应为 File、Folder 或 Drive 对象的名称。说明对于驱动器，路径不包含根目录。
VBS教程：属性-ParentFolder 属性
ParentFolder 属性返回指定文件或文件夹的父文件夹。只读。 object.ParentFolder object 应为 File 或 Folder 对象的名称。说明以下代码
VBS教程：属性-Name 属性
Name 属性设置或返回指定的文件或文件夹的名称。可读写。 object.Name [= newname] 参数 object 必选项。应为 File 或&
VBS教程：属性-Line 属性
Line 属性只读属性，返回 TextStream 文件中的当前行号。 object.Line object 通常是 TextStream 对象的名称。说明文件刚
VBS教程：属性-Key 属性
Key 属性在 Dictionary 对象中设置 key。 object.Key(key) = newkey 参数 object 必选项。通常是 Dictionary
VBS教程：属性-Item 属性
Item 属性设置或返回 Dictionary 对象中指定的 key 对应的 item，或返回集合中基于指定的 key 的&
VBS教程：属性-IsRootFolder 属性
IsRootFolder 属性如果指定的文件夹是根文件夹，返回 True；否则返回 False。 object.IsRootFolder object 应为&n
VBS教程：属性-IsReady 属性
IsReady 属性如果指定的驱动器就绪，返回 True；否则返回 False。 object.IsReady object 应为 Drive&nbs
VBS教程：属性-FreeSpace 属性
FreeSpace 属性返回指定的驱动器或网络共享对于用户的可用空间大小。只读。 object.FreeSpace object 应为 Drive 对象的名称。
VBS教程：属性-FileSystem 属性
FileSystem 属性返回指定的驱动器使用的文件系统的类型。 object.FileSystem object 应为 Drive 对象的名称。说明可
VBS教程：属性-Files 属性
Files 属性返回由指定文件夹中所有 File 对象（包括隐藏文件和系统文件）组成的 Files 集合。 object.Files object&n

首页

博学

6Ren·AI

商城

javascript - 无法读取未定义的属性 'getHours'