Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/374.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在D3图表中寻找阈值交点_Javascript_Math_D3.js - Fatal编程技术网

Javascript 在D3图表中寻找阈值交点

Javascript 在D3图表中寻找阈值交点,javascript,math,d3.js,Javascript,Math,D3.js,我用(优秀的)D3创建了一个简单的折线图。它有一个表示为水平红线的阈值。我想做的是计算值线与阈值线相交的位置,如下所示: 我可以非常接近,因为我可以访问数据数组,但我需要非常精确,并且它可以在所有范围内工作。如果有人能帮忙,我将不胜感激。非常感谢 path.line{笔划宽度:2;填充:无;} 风险值数据=[{ “时间”:“2014-02-25T19:00:00Z”, “温度”:“39.08” }, { “时间”:“2014-02-25T21:00:00Z”, “温度”:“39.51” }

我用(优秀的)D3创建了一个简单的折线图。它有一个表示为水平红线的阈值。我想做的是计算值线与阈值线相交的位置,如下所示:

我可以非常接近,因为我可以访问数据数组,但我需要非常精确,并且它可以在所有范围内工作。如果有人能帮忙,我将不胜感激。非常感谢


path.line{笔划宽度:2;填充:无;}
风险值数据=[{
“时间”:“2014-02-25T19:00:00Z”,
“温度”:“39.08”
}, {
“时间”:“2014-02-25T21:00:00Z”,
“温度”:“39.51”
}, {
“时间”:“2014-02-25T23:00:00Z”,
“临时”:“39.14”
}, {
“时间”:“2014-02-26T01:00:00Z”,
“温度”:“40.79”
}, {
“时间”:“2014-02-26T03:00:00Z”,
“温度”:“41.17”
}, {
“时间”:“2014-02-26T05:00:00Z”,
“温度”:“40.39”
}, {
“时间”:“2014-02-26T07:00:00Z”,
“温度”:“40.49”
}, {
“时间”:“2014-02-26T09:00:00Z”,
“温度”:“40.29”
}, {
“时间”:“2014-02-26T11:00:00Z”,
“温度”:“39.90”
}, {
“时间”:“2014-02-26T13:00:00Z”,
“温度”:“39.66”
}, {
“时间”:“2014-02-26T15:00:00Z”,
“温度”:“39.01”
}, {
“时间”:“2014-02-26T17:00:00Z”,
“温度”:“37.91”
}, {
“时间”:“2014-02-26T19:00:00Z”,
“临时”:“39.64”
}, {
“时间”:“2014-02-26T21:00:00Z”,
“温度”:“38.21”
}, {
“时间”:“2014-02-26T23:00:00Z”,
“温度”:“39.60”
}, {
“时间”:“2014-02-27T01:00:00Z”,
“温度”:“40.13”
}, {
“时间”:“2014-02-27T03:00:00Z”,
“温度”:“40.51”
}, {
“时间”:“2014-02-27T05:00:00Z”,
“温度”:“40.78”
}, {
“时间”:“2014-02-27T07:00:00Z”,
“温度”:“40.54”
}, {
“时间”:“2014-02-27T09:00:00Z”,
“温度”:“40.29”
}, {
“时间”:“2014-02-27T11:00:00Z”,
“温度”:“40.24”
}, {
“时间”:“2014-02-27T13:00:00Z”,
“温度”:“40.00”
}, {
“时间”:“2014-02-27T15:00:00Z”,
“温度”:“40.01”
}, {
“时间”:“2014-02-27T17:00:00Z”,
“温度”:“38.96”
}, {
“时间”:“2014-02-27T19:00:00Z”,
“温度”:“39.20”
}, {
“时间”:“2014-02-27T21:00:00Z”,
“温度”:“40.14”
}, {
“时间”:“2014-02-27T23:00:00Z”,
“温度”:“38.71”
}, {
“时间”:“2014-02-28T01:00:00Z”,
“温度”:“40.88”
}, {
“时间”:“2014-02-28T03:00:00Z”,
“温度”:“40.98”
}, {
“时间”:“2014-02-28T05:00:00Z”,
“温度”:“41.05”
}, {
“时间”:“2014-02-28T07:00:00Z”,
“温度”:“40.60”
}, {
“时间”:“2014-02-28009:00:00Z”,
“温度”:“40.47”
}, {
“时间”:“2014-02-28811:00:00Z”,
“温度”:“40.39”
}, {
“时间”:“2014-02-28813:00:00Z”,
“温度”:“40.44”
}, {
“时间”:“2014-02-28815:00:00Z”,
“温度”:“37.58”
}, {
“时间”:“2014-02-28T17:00:00Z”,
“温度”:“38.26”
}, {
“时间”:“2014-02-28819:00:00Z”,
“临时”:“37.83”
}, {
“时间”:“2014-02-28 21:00:00Z”,
“临时”:“39.26”
}, {
“时间”:“2014-02-28 23:00:00Z”,
“温度”:“38.25”
}, {
“时间”:“2014-03-01T01:00:00Z”,
“温度”:“39.60”
}, {
“时间”:“2014-03-01T03:00:00Z”,
“临时”:“40.09”
}, {
“时间”:“2014-03-01T05:00:00Z”,
“临时”:“39.92”
}, {
“时间”:“2014-03-01T07:00:00Z”,
“温度”:“39.67”
}, {
“时间”:“2014-03-01T09:00:00Z”,
“临时”:“39.73”
}, {
“时间”:“2014-03-01T11:00:00Z”,
“临时”:“39.93”
}, {
“时间”:“2014-03-01T13:00:00Z”,
“温度”:“39.90”
}, {
“时间”:“2014-03-01T15:00:00Z”,
“临时”:“39.82”
}, {
“时间”:“2014-03-01T17:00:00Z”,
“临时”:“37.47”
}, {
“时间”:“2014-03-01T19:00:00Z”,
“温度”:“38.30”
}, {
“时间”:“2014-03-01T21:00:00Z”,
“临时”:“39.17”
}, {
“时间”:“2014-03-01T23:00:00Z”,
“温度”:“38.87”
}, {
“时间”:“2014-03-02T01:00:00Z”,
“温度”:“40.01”
}, {
“时间”:“2014-03-02T03:00:00Z”,
“温度”:“40.31”
}, {
“时间”:“2014-03-02T05:00:00Z”,
“临时”:“39.31”
}, {
“时间”:“2014-03-02T07:00:00Z”,
“温度”:“39.78”
}, {
“时间”:“2014-03-02T09:00:00Z”,
“温度”:“40.32”
}, {
“时间”:“2014-03-02T11:00:00Z”,
“温度”:“40.48”
}, {
“时间”:“2014-03-02T13:00:00Z”,
“临时”:“39.94”
}, {
“时间”:“2014-03-02T15:00:00Z”,
“温度”:“38.42”
}, {
“时间”:“2014-03-02T17:00:00Z”,
“温度”:“39.41”
}, {
“时间”:“2014-03-02T19:00:00Z”,
“临时”:“39.56”
}, {
“时间”:“2014-03-02T21:00:00Z”,
“临时”:“36.89”
}, {
“时间”:“2014-03-02T23:00:00Z”,
“临时”:“39.53”
}, {
“时间”:“2014-03-03T01:00:00Z”,
“温度”:“40.97”
}, {
“时间”:“2014-03-03T03:00:00Z”,
“温度”:“40.58”
}, {
“时间”:“2014-03-03T05:00:00Z”,
“温度”:“38.17”
}, {
“时间”:“2014-03-03T07:00:00Z”,
“温度”:“39.50”
}, {
“时间”:“2014-03-03T09:00:00Z”,
“温度”:“40.47”
}, {
“时间”:“2014-03-03T11:00:00Z”,
“温度”:“40.28”
}, {
“时间”:“2014-03-03T13:00:00Z”,
“温度”:“37.48”
}, {
“时间”:“2014-03-03T15:00:00Z”,
“温度”:“38.13”
}, {
“时间”:“2014-03-03T17:00:00Z”,
“临时”:“39.17”
}, {
“时间”:“2014-03-03T19:00:00Z”,
“临时”:“39.27”
}, {
“时间”:“2014-03-03T21:00:00Z”,
“温度”:“38.65”
}, {
“时间”:“2014-03-03T23:00:00Z”,
“温度”:“39.78”
}, {
“时间”:“2014-03-04T01:00:00Z”,
“临时”:“39.62”
}, {
“时间”:“2014-03-04T03:00:00Z”,
“临时”:“39.49”
}, {
“时间”:“2014-03-04T05:00:00Z”,
“温度”:“39.65”
}, {
“时间”:“2014-03-04T07:00:00Z”,
“温度”:“40.07”
}, {
“时间”:“2014-03-04T09:00:00Z”,
“温度”:“40.72”
}, {
“时间”:“2014-03-04T11:00:00Z”,
“温度”:“40.46”
}, {
“时间”:“2014-03-04T13:00:00Z”,
“温度”:“38.86”
}, {
“时间”:“2014-03-04T15:00:00Z”,
“温度”:“39.40”
}, {
“时间”:“2014-03-04T17:00:00Z”,
“温度”:“40.39”
}, {
“时间”:“2014-03-04T19:00:00Z”,
“临时”:“39.61”
}, {
“时间”:“2014-03-04T21:00:00Z”,
“温度”:“38.94”
}, {
“时间”:“2014-03-04T23:00:00Z”,
“温度”:“40.43”
}, {
“时间”:“2014-03-05T01:00:00Z”,
“温度”:“40.17”
}, {
“时间”:“2014-03-05T03:00:00Z”,
“临时”:“39.81”
}, {
<div id="chart"></div>


path.line { stroke-width: 2; fill: none; }

var data = [{
    "time": "2014-02-25T19:00:00Z",
    "temp": "39.08"
}, {
    "time": "2014-02-25T21:00:00Z",
    "temp": "39.51"
}, {
    "time": "2014-02-25T23:00:00Z",
    "temp": "39.14"
}, {
    "time": "2014-02-26T01:00:00Z",
    "temp": "40.79"
}, {
    "time": "2014-02-26T03:00:00Z",
    "temp": "41.17"
}, {
    "time": "2014-02-26T05:00:00Z",
    "temp": "40.39"
}, {
    "time": "2014-02-26T07:00:00Z",
    "temp": "40.49"
}, {
    "time": "2014-02-26T09:00:00Z",
    "temp": "40.29"
}, {
    "time": "2014-02-26T11:00:00Z",
    "temp": "39.90"
}, {
    "time": "2014-02-26T13:00:00Z",
    "temp": "39.66"
}, {
    "time": "2014-02-26T15:00:00Z",
    "temp": "39.01"
}, {
    "time": "2014-02-26T17:00:00Z",
    "temp": "37.91"
}, {
    "time": "2014-02-26T19:00:00Z",
    "temp": "39.64"
}, {
    "time": "2014-02-26T21:00:00Z",
    "temp": "38.21"
}, {
    "time": "2014-02-26T23:00:00Z",
    "temp": "39.60"
}, {
    "time": "2014-02-27T01:00:00Z",
    "temp": "40.13"
}, {
    "time": "2014-02-27T03:00:00Z",
    "temp": "40.51"
}, {
    "time": "2014-02-27T05:00:00Z",
    "temp": "40.78"
}, {
    "time": "2014-02-27T07:00:00Z",
    "temp": "40.54"
}, {
    "time": "2014-02-27T09:00:00Z",
    "temp": "40.29"
}, {
    "time": "2014-02-27T11:00:00Z",
    "temp": "40.24"
}, {
    "time": "2014-02-27T13:00:00Z",
    "temp": "40.00"
}, {
    "time": "2014-02-27T15:00:00Z",
    "temp": "40.01"
}, {
    "time": "2014-02-27T17:00:00Z",
    "temp": "38.96"
}, {
    "time": "2014-02-27T19:00:00Z",
    "temp": "39.20"
}, {
    "time": "2014-02-27T21:00:00Z",
    "temp": "40.14"
}, {
    "time": "2014-02-27T23:00:00Z",
    "temp": "38.71"
}, {
    "time": "2014-02-28T01:00:00Z",
    "temp": "40.88"
}, {
    "time": "2014-02-28T03:00:00Z",
    "temp": "40.98"
}, {
    "time": "2014-02-28T05:00:00Z",
    "temp": "41.05"
}, {
    "time": "2014-02-28T07:00:00Z",
    "temp": "40.60"
}, {
    "time": "2014-02-28T09:00:00Z",
    "temp": "40.47"
}, {
    "time": "2014-02-28T11:00:00Z",
    "temp": "40.39"
}, {
    "time": "2014-02-28T13:00:00Z",
    "temp": "40.44"
}, {
    "time": "2014-02-28T15:00:00Z",
    "temp": "37.58"
}, {
    "time": "2014-02-28T17:00:00Z",
    "temp": "38.26"
}, {
    "time": "2014-02-28T19:00:00Z",
    "temp": "37.83"
}, {
    "time": "2014-02-28T21:00:00Z",
    "temp": "39.26"
}, {
    "time": "2014-02-28T23:00:00Z",
    "temp": "38.25"
}, {
    "time": "2014-03-01T01:00:00Z",
    "temp": "39.60"
}, {
    "time": "2014-03-01T03:00:00Z",
    "temp": "40.09"
}, {
    "time": "2014-03-01T05:00:00Z",
    "temp": "39.92"
}, {
    "time": "2014-03-01T07:00:00Z",
    "temp": "39.67"
}, {
    "time": "2014-03-01T09:00:00Z",
    "temp": "39.73"
}, {
    "time": "2014-03-01T11:00:00Z",
    "temp": "39.93"
}, {
    "time": "2014-03-01T13:00:00Z",
    "temp": "39.90"
}, {
    "time": "2014-03-01T15:00:00Z",
    "temp": "39.82"
}, {
    "time": "2014-03-01T17:00:00Z",
    "temp": "37.47"
}, {
    "time": "2014-03-01T19:00:00Z",
    "temp": "38.30"
}, {
    "time": "2014-03-01T21:00:00Z",
    "temp": "39.17"
}, {
    "time": "2014-03-01T23:00:00Z",
    "temp": "38.87"
}, {
    "time": "2014-03-02T01:00:00Z",
    "temp": "40.01"
}, {
    "time": "2014-03-02T03:00:00Z",
    "temp": "40.31"
}, {
    "time": "2014-03-02T05:00:00Z",
    "temp": "39.31"
}, {
    "time": "2014-03-02T07:00:00Z",
    "temp": "39.78"
}, {
    "time": "2014-03-02T09:00:00Z",
    "temp": "40.32"
}, {
    "time": "2014-03-02T11:00:00Z",
    "temp": "40.48"
}, {
    "time": "2014-03-02T13:00:00Z",
    "temp": "39.94"
}, {
    "time": "2014-03-02T15:00:00Z",
    "temp": "38.42"
}, {
    "time": "2014-03-02T17:00:00Z",
    "temp": "39.41"
}, {
    "time": "2014-03-02T19:00:00Z",
    "temp": "39.56"
}, {
    "time": "2014-03-02T21:00:00Z",
    "temp": "36.89"
}, {
    "time": "2014-03-02T23:00:00Z",
    "temp": "39.53"
}, {
    "time": "2014-03-03T01:00:00Z",
    "temp": "40.97"
}, {
    "time": "2014-03-03T03:00:00Z",
    "temp": "40.58"
}, {
    "time": "2014-03-03T05:00:00Z",
    "temp": "38.17"
}, {
    "time": "2014-03-03T07:00:00Z",
    "temp": "39.50"
}, {
    "time": "2014-03-03T09:00:00Z",
    "temp": "40.47"
}, {
    "time": "2014-03-03T11:00:00Z",
    "temp": "40.28"
}, {
    "time": "2014-03-03T13:00:00Z",
    "temp": "37.48"
}, {
    "time": "2014-03-03T15:00:00Z",
    "temp": "38.13"
}, {
    "time": "2014-03-03T17:00:00Z",
    "temp": "39.17"
}, {
    "time": "2014-03-03T19:00:00Z",
    "temp": "39.27"
}, {
    "time": "2014-03-03T21:00:00Z",
    "temp": "38.65"
}, {
    "time": "2014-03-03T23:00:00Z",
    "temp": "39.78"
}, {
    "time": "2014-03-04T01:00:00Z",
    "temp": "39.62"
}, {
    "time": "2014-03-04T03:00:00Z",
    "temp": "39.49"
}, {
    "time": "2014-03-04T05:00:00Z",
    "temp": "39.65"
}, {
    "time": "2014-03-04T07:00:00Z",
    "temp": "40.07"
}, {
    "time": "2014-03-04T09:00:00Z",
    "temp": "40.72"
}, {
    "time": "2014-03-04T11:00:00Z",
    "temp": "40.46"
}, {
    "time": "2014-03-04T13:00:00Z",
    "temp": "38.86"
}, {
    "time": "2014-03-04T15:00:00Z",
    "temp": "39.40"
}, {
    "time": "2014-03-04T17:00:00Z",
    "temp": "40.39"
}, {
    "time": "2014-03-04T19:00:00Z",
    "temp": "39.61"
}, {
    "time": "2014-03-04T21:00:00Z",
    "temp": "38.94"
}, {
    "time": "2014-03-04T23:00:00Z",
    "temp": "40.43"
}, {
    "time": "2014-03-05T01:00:00Z",
    "temp": "40.17"
}, {
    "time": "2014-03-05T03:00:00Z",
    "temp": "39.81"
}, {
    "time": "2014-03-05T05:00:00Z",
    "temp": "40.68"
}, {
    "time": "2014-03-05T07:00:00Z",
    "temp": "39.80"
}, {
    "time": "2014-03-05T09:00:00Z",
    "temp": "40.38"
}, {
    "time": "2014-03-05T11:00:00Z",
    "temp": "39.05"
}, {
    "time": "2014-03-05T13:00:00Z",
    "temp": "37.91"
}, {
    "time": "2014-03-05T15:00:00Z",
    "temp": "39.28"
}, {
    "time": "2014-03-05T17:00:00Z",
    "temp": "39.72"
}, {
    "time": "2014-03-05T19:00:00Z",
    "temp": "38.84"
}, {
    "time": "2014-03-05T21:00:00Z",
    "temp": "39.74"
}, {
    "time": "2014-03-05T23:00:00Z",
    "temp": "40.63"
}, {
    "time": "2014-03-06T01:00:00Z",
    "temp": "39.66"
}, {
    "time": "2014-03-06T03:00:00Z",
    "temp": "40.71"
}, {
    "time": "2014-03-06T05:00:00Z",
    "temp": "40.67"
}, {
    "time": "2014-03-06T07:00:00Z",
    "temp": "40.93"
}, {
    "time": "2014-03-06T09:00:00Z",
    "temp": "40.48"
}, {
    "time": "2014-03-06T11:00:00Z",
    "temp": "39.54"
}, {
    "time": "2014-03-06T13:00:00Z",
    "temp": "40.54"
}, {
    "time": "2014-03-06T15:00:00Z",
    "temp": "39.90"
}, {
    "time": "2014-03-06T17:00:00Z",
    "temp": "39.85"
}, {
    "time": "2014-03-06T19:00:00Z",
    "temp": "39.37"
}, {
    "time": "2014-03-06T21:00:00Z",
    "temp": "40.58"
}, {
    "time": "2014-03-06T23:00:00Z",
    "temp": "39.72"
}, {
    "time": "2014-03-07T01:00:00Z",
    "temp": "40.40"
}, {
    "time": "2014-03-07T03:00:00Z",
    "temp": "40.68"
}, {
    "time": "2014-03-07T05:00:00Z",
    "temp": "40.72"
}, {
    "time": "2014-03-07T07:00:00Z",
    "temp": "41.08"
}, {
    "time": "2014-03-07T09:00:00Z",
    "temp": "38.06"
}, {
    "time": "2014-03-07T11:00:00Z",
    "temp": "39.39"
}, {
    "time": "2014-03-07T13:00:00Z",
    "temp": "39.83"
}, {
    "time": "2014-03-07T15:00:00Z",
    "temp": "40.51"
}, {
    "time": "2014-03-07T17:00:00Z",
    "temp": "40.21"
}, {
    "time": "2014-03-07T19:00:00Z",
    "temp": "38.25"
}, {
    "time": "2014-03-07T21:00:00Z",
    "temp": "40.39"
}, {
    "time": "2014-03-07T23:00:00Z",
    "temp": "40.54"
}, {
    "time": "2014-03-08T01:00:00Z",
    "temp": "39.31"
}, {
    "time": "2014-03-08T03:00:00Z",
    "temp": "40.29"
}, {
    "time": "2014-03-08T05:00:00Z",
    "temp": "40.94"
}, {
    "time": "2014-03-08T07:00:00Z",
    "temp": "41.05"
}, {
    "time": "2014-03-08T09:00:00Z",
    "temp": "39.82"
}, {
    "time": "2014-03-08T11:00:00Z",
    "temp": "39.14"
}, {
    "time": "2014-03-08T13:00:00Z",
    "temp": "36.90"
}, {
    "time": "2014-03-08T15:00:00Z",
    "temp": "39.69"
}, {
    "time": "2014-03-08T17:00:00Z",
    "temp": "39.61"
}, {
    "time": "2014-03-08T19:00:00Z",
    "temp": "38.97"
}, {
    "time": "2014-03-08T21:00:00Z",
    "temp": "39.58"
}, {
    "time": "2014-03-08T23:00:00Z",
    "temp": "40.39"
}, {
    "time": "2014-03-09T01:00:00Z",
    "temp": "40.85"
}, {
    "time": "2014-03-09T03:00:00Z",
    "temp": "40.66"
}, {
    "time": "2014-03-09T05:00:00Z",
    "temp": "40.91"
}, {
    "time": "2014-03-09T07:00:00Z",
    "temp": "40.83"
}, {
    "time": "2014-03-09T09:00:00Z",
    "temp": "37.44"
}, {
    "time": "2014-03-09T11:00:00Z",
    "temp": "39.01"
}, {
    "time": "2014-03-09T13:00:00Z",
    "temp": "37.28"
}, {
    "time": "2014-03-09T15:00:00Z",
    "temp": "38.47"
}, {
    "time": "2014-03-09T17:00:00Z",
    "temp": "39.60"
}, {
    "time": "2014-03-09T19:00:00Z",
    "temp": "39.15"
}, {
    "time": "2014-03-09T21:00:00Z",
    "temp": "40.64"
}, {
    "time": "2014-03-09T23:00:00Z",
    "temp": "37.76"
}];
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%SZ").parse;
data.forEach(function (d) { d.time = parseDate(d.time); });

var chart = d3.select("#chart");

var padding = 40,
    width = 950,
    height = 300,
    xTicks = 10,
    yTicks = 8;

var svg = chart.append("svg")
    .attr("width", width + padding * 2)
    .attr("height", height + padding * 2)
    .append("g")
    .attr("transform", "translate(" + padding + "," + padding + ")");

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

var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(xTicks);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(yTicks);

var valueLine = d3.svg.line()
    .interpolate("basis")
    .x(function (d) {
    return x(d.time);
})
    .y(function (d) {
    return y(d.temp);
});

x.domain(d3.extent(data, function (d) {
    return d.time;
}));
y.domain([33, 43]);

var mainLine = svg.append("path").attr({
    "class": "line",
    stroke: "steelblue",
    d: valueLine(data)
});

var threshold = 40.5;
svg.append("line").attr("stroke", "#F00").attr("x1", 0).attr("y1", y(threshold)).attr("x2", width).attr("y2", y(threshold)).attr("class", "line");
// .interpolate("basis")
var yLine = y(threshold);
console.log(yLine);
var node = mainLine.node();
var pathLength = node.getTotalLength();
for (var i = 0; i < pathLength; i++) {
    var point = node.getPointAtLength(i);
    console.log(point);
    if(Math.floor(point.y) == yLine) {
        svg.append("circle").attr({cx:point.x, cy:point.y, r:2});
    }
}
circle {
    fill: green;
}