Javascript d3.js使用DateTime和int数组创建简单的折线图
我很难用一组数据创建一个简单的折线图 我得到一个错误:错误:属性d:期望数,MNaN,NaNLNaN,NaNL 我通过c输入了这些数据,并将其转换为如下数组:Javascript d3.js使用DateTime和int数组创建简单的折线图,javascript,c#,html,d3.js,svg,Javascript,C#,Html,D3.js,Svg,我很难用一组数据创建一个简单的折线图 我得到一个错误:错误:属性d:期望数,MNaN,NaNLNaN,NaNL 我通过c输入了这些数据,并将其转换为如下数组: [ {date: "2017-08-15 16:00:00", high: "73.41", low: "73.2"}, {date: "2017-08-15 15:45:00", high: "73.38", low: "73.2715"}, {date: "2017-08-15 15:30:00", high: "73.33", lo
[
{date: "2017-08-15 16:00:00", high: "73.41", low: "73.2"},
{date: "2017-08-15 15:45:00", high: "73.38", low: "73.2715"},
{date: "2017-08-15 15:30:00", high: "73.33", low: "73.28"},
{date: "2017-08-15 15:15:00", high: "73.305", low: "73.185"},
{date: "2017-08-15 15:00:00", high: "73.22", low: "73.15"},
{date: "2017-08-15 14:45:00", high: "73.24", low: "73.1816"},
]
我试图在x轴上画出日期,在y轴上画出高点。我在这方面发现了不少问题,下面我引用了一些
使用我的type函数,我将'date'对象转换为DateTime类型,并将'high'转换为数字。然后我使用render来显示图形
@foreach (var i in Model.Data)
{
<div>@i.Value.high</div>
}
<script>
var arrayData = [];
var i in Model.Data)
{
@:arrayData.push({date : '@i.Key', high : '@i.Value.high', low : '@i.Value.low'});
}
var outerWidth = 500;
var outerHeight = 500;
var margin = { left: 30, top: 30, right: 30, bottom: 30 };
var xColumn = "date";
var yColumn = "high";
// parse the date / time
var parseTime = d3.timeParse("%d-%b-%y");
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
//create a group
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//append a path element to our group
var path = g.append("path");
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
//set ranges
var xScale = d3.scaleTime().range([0, innerWidth]);
var yScale = d3.scaleLinear().range([innerHeight, 0]);
//changed the below from d[xColumn] to d.date
var line = d3.line()
.x(function (d) { return xScale(d.xColumn); })
.y(function (d) { return yScale(d.yColumn); });
//changed the below from d[xColumn] to d.date
function render(data) {
xScale.domain(d3.extent(data, function (d) { return d.date; }));
yScale.domain(d3.extent(data, function (d) { return d.high; }));
path.attr("d", line(data));
}
function type(d) {
d.date = new Date(d.date);
d.date = parseTime(d.date);
d.high = +d.high;
d.low = + d.low;
return d;
}
//below i have deterrmined that the type conversion is working by calling type() on the arrayData; i checked the arrayData.date before then after and saw it was converted to a object; I then checked
//to see if this was an instance of a date
console.log(arrayData.date);
type(arrayData);
var temp3 = (arrayData.date instanceof Date);
console.log(temp3);
var temp = typeof arrayData.date;
var temp2 = typeof arrayData.high;
console.log(temp);
console.log(temp2);
//try and run graph now
render(arrayData);
</script>
在搜索了所有内容后,我觉得我的格式是正确的。我是d3新手,不知道自己做错了什么。有人能帮忙吗?您引用对象属性的方式在javascript中不起作用 您分配:
var xColumn = "date";
var yColumn = "high";
然后尝试使用以下参数引用d.date和d.high:
d、 yColumn和d.xColumn将返回未定义。如果要以这种方式引用它们,则需要使用类似于:d[xColumn]和d[yColumn]的符号。这就成功了!非常感谢主席先生,我会接受这个答案。关于我引用对象的方式,我认为javascript允许通过点符号进行引用,如下所述:很高兴它能工作!点表示法确实有效,只是不能在点后使用变量。之前我在x轴上插入了“数字”以使其工作。但是,当我开始在x轴上再次使用日期时,我得到了一个错误:“属性d:预期数字,MNaN,72.084347120…”你知道这是为什么吗?似乎它仍然期望x轴上有一个数字
.x(function (d) { return xScale(d.xColumn); })
.y(function (d) { return yScale(d.yColumn); });