个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我试图在 D3.js 中制作一个简单的线图，从 Javascript 中的数组加载我的数据。
我从这个简单的例子开始
http://bl.ocks.org/d3noob/b3ff6ae1c120eea654b5
我正在遵循这篇文章中的建议
D3js take data from an array instead of a file
这是我的代码
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Adds the svg canvas
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 + ")");
var data = [
{time: "01-01-2000", value:23.2},
{time: "02-01-2000", value:22.2},
{time: "03-01-2000", value:21.5},
{time: "04-01-2000", value:21.2},
{time: "05-01-2000", value:20.8},
{time: "06-01-2000", value:21.6},
{time: "01-02-2000", value:21.6},
{time: "01-03-2000", value:22.0},
{time: "01-04-2000", value:22.4},
{time: "01-05-2000", value:23.3},
];
// Get the data
//d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.time);
d.close = +d.value;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.time; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
//});
</script>
</body>
当我尝试执行时，我在 Web 控制台中收到以下错误
d3.v3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,0.9012875536…".
任何建议/示例将不胜感激!!!
切萨雷
最佳答案
您有另一种日期格式。试试这个:
var parseDate = d3.time.format("%d-%m-%Y").parse;
并在您的 x.domain 中使用 d.date 而不是 d.time:
x.domain(d3.extent(data, function(d) { return d.time; }));
关于javascript - 在 D3.js 中制作折线图从数组加载数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38076166/
27
4
0
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
折线图是一种用于可视化数据变化趋势的图表，它可以用于表示任何数值随着时间或类别的变化。 折线图由折线段和折线交点组成，折线段表示数值随时间或类别的变化趋势，折线交点表示数据的转折点。 折
我是 d3 和 typescript 的新手。 我正在尝试使用 d3 v4 和 typescript 创建一个简单的折线图。 但是，我收到了一个 typescript 错误，如下图所示: 问题是什么？
我是 Qlikview 的新手，经过几次失败的尝试后，我不得不请求一些有关 Qlikview 中图表的指导。我想创建折线图，其中包含: 一维 - 一个月的时间段按天数分割 一个表达式 - 每天创建的任
我正在尝试使用 Firebase 实时数据库中的数据在 Android 中制作折线图。 这是数据库的结构: enter image description here 这是代码: public clas
我有一个 TSQL 查询，它提供了一些性能基线的一个月数据。我用折线图显示数据。现在我想在报告中添加更多参数，以提供从两个不同月份选择数据的选项，并将其显示在同一个折线图中以进行比较。我不知道如何开始
我有一个简单(但非常大)的数据集，其中包含从 4 月到 8 月在不同站点进行的计数。 在 4 月中旬和 7 月之间，没有零计数 - 但零线从最早到最晚的日期延伸。 以下是用于制作上述图表的部分数据(列
我正在创建一个折线图，我想在不改变线条长度的情况下增加线条的高度或厚度。 在增加宽度属性之前，它看起来像这样: 增加宽度属性后，它看起来像这样: 我只想增加 height，但是没有这样的属性，所以我尝
我想在折线图的顶部显示值。我看过this answer这很有帮助，但它改变了折线图节点。我想要的是相同的想法，但不在节点上显示值，而是在它们附近(可能在它们的右侧和上方)显示值，例如:
我正在尝试使用谷歌图表以折线图的形式显示mysql数据。我认为问题出在我尝试格式化谷歌图表数据的部分。我的代码有什么问题吗？ $sth = mysql_query("SELECT * FROM rea
我有 JavaFX LineChart 和一些带有 XYChart.Series 对象的数据 XYChart.Series series = new XYChart.Series(); series.
给定: 理想图 - 描绘了我的机器应该具有的预期读数。实际图表 - 描述我的机器在该实例中的实际读数。 X轴:来自机器的力(N) Y 轴:时间 这两个图都是使用 python 中的 pyplot 库创
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 6 年前。
<% function table2(total,table_x,table_y,all_width,all_height,line_n
我想根据数据中的一列离散值过滤使用 plotly 创建的图表。最终目标是能够使用按钮来更新过滤值，所以我不想事先过滤数据。 library(plotly) df % filter(group1=
我正在尝试在 JavaFX 中创建折线图。此折线图应该有一个轴 (y) 与数字和另一个轴 (x) 与日期。日期范围应该由用户使用两个日期选择器来选择。现在这是我的问题:折线图只有类别和数字轴。有什么方
我正在使用 nivo 折线图，并希望将 x 轴用作时间线，最多一分钟。 不幸的是，我无法呈现该图表，因为它无法正确读取日期。例如，这是我的数据的一部分: { x: "2020-04-24T13:07:
我有一个用 gRaphael 创建的折线图。它有轴和刻度线，但我想要网格线。是否有内置的方法来实现这一点或可以帮助我的附加库？ 最佳答案 gRaphael 没有添加网格线的内置方法，但绘制它们非常容易
我正在生成一份报告，该报告是根据查询字符串在网页的页面加载时生成的。我在电子表格中生成的单元格数据完全符合我的要求。现在我需要添加一个折线图。数据是动态的，行数会有所不同。 搜索后没有信息，这与在 .
我正在尝试使用 highcharts 中每 x 秒更新一次的折线图。理想情况下，我希望它使用一些特定数据进行初始化，并每 x 秒轮询一次 Web 服务，并进行相应更新。 目前，我只是尝试使用网络服务中
我是一名优秀的程序员,十分优秀！