我在创建带有数据数组的简单折线图时遇到麻烦。

我收到错误消息:错误:属性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", 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轴上绘制日期。 我发现了很多问题,下面引用了几个。

用数组绘制D3简单折线图

从数据对象数组创建折线图

使用我的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的新手,无法弄清楚我在做什么错。 有人可以帮忙吗?

#1楼 票数:1 已采纳

您引用对象属性的方式在javascript中不起作用。

您分配:

var xColumn = "date";
var yColumn = "high";

然后尝试使用以下方法引用d.dated.high

 .x(function (d) { return xScale(d.xColumn); })
 .y(function (d) { return yScale(d.yColumn); });

d.yColumnd.xColumn将返回undefined 如果要以这种方式引用它们,则需要使用诸如d[xColumn]d[yColumn]

  ask by JoeG translate from so

未解决问题?本站智能推荐:

1回复

使用D3.js(v4)填充折线图

试图建立折线图,我有以下代码。 我想尝试将('fill', 'red')替换为仅从一行开始填充的填充。 知道我该如何解决吗?
1回复

d3js - 如何为可以更新的多组项目绘制多折线图?

我是 d3 的新手,目前有一个简单的折线图,可以为单个组的某些数据显示两条线。 我想做的是能够以灵活的方式为多个组创建多行。 每个组将有几行,它们将为组父级进行颜色编码 - 在我的数据中,在这种情况下,它是资产或股票行情 目前您可以在我的代码中看到我正在为每个路径手动创建一个数组,但我想如果我开始拥
1回复

d3js多折线图正在绘制区域上绘制-问题的更新模式吗?

我创建了一个折线图,该线图绘制了多组线对-尽管我不确定是否要正确或以最d3的方式更新线。 用传入的新数据更新现有路径的正确方法是什么? 我使用setinterval模拟新数据的到达。 我遇到的另一个问题是,所有线都未绘制在实际的绘图区域上-它们似乎从图表的左侧开始。 我已经检查了x比
1回复

使用d3.js在几个div上创建一个SVG

假设我有一些看起来像这样的HTML: 其中......只是段落或其他代码。 问题:我希望能够使用d3.js在每个div上附加一个SVG。 例如,假设我想制作一个矩形,如: 如何在第一行使用选择器来执行此操作? 我已经尝试了selectall()和select()以及
1回复

使用d3.js的折线图中的IF语句笔划

我已经使用数据库中的数据绘制了一个图形,并且当数据库中的数字大于500时,我希望该线变为红色(如下所示)。 不幸的是,这种方式无法正常工作,我尝试了其他一些方法,但没有成功。 尽管虚线确实可以使用代码.style("stroke-dasharray", ("3, 3")) 我的问题
1回复

使用d3.js构建折线图

我正在尝试按照本教程为JSON格式的数据生成简单的折线图: 这是我产生的代码: } 当我尝试追加路径 我收到“路径属性的值无效...”错误。 这是为什么?
2回复

D3.js:访问数组内的对象属性以创建折线图

我正在尝试使用具有以下数据结构的 d3.js 创建折线图: 对象的索引号是 x 值,“video_views”是 y 值。 问题:它附加了 svg 画布,“g”元素就好了,但是没有检测到图中每个点的 x 和 y 值,所以没有显示任何内容。 任何帮助表示赞赏。 谢谢阅读。
1回复

使用D3.js创建矩形图

我正在尝试制作d3 javascript,该javascript创建一个矩形,其颜色取决于数据集。 所有矩形彼此相邻,例如: 我的脚本可以为所有数据创建矩形,但是它会像这样溢出: 如何为d3脚本创建width和height属性,使其看起来更像 这是我的脚本: