Javascript D3折线图-时间直线上的数字（无错误）_Javascript_D3.js_Svg_Charts_Linechart

Javascript D3折线图-时间直线上的数字（无错误）

javascript d3.js svg charts

Javascript D3折线图-时间直线上的数字（无错误）,javascript,d3.js,svg,charts,linechart,Javascript,D3.js,Svg,Charts,Linechart,在绘制当前折线图时，我试图绘制频率与时间的关系图。然而，我没有得到任何错误，但我得到的只是一条直线。有人能帮我吗 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/aja

在绘制当前折线图时，我试图绘制频率与时间的关系图。然而，我没有得到任何错误，但我得到的只是一条直线。有人能帮我吗

<html>

<head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>

</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

  <svg width="1000" height="500"></svg>

<script>
//module declaration 
var app = angular.module('myApp',[]);

//Controller declaration
app.controller('myCtrl', function($scope){

    //raw data
    var data = [
        {x: "2016-01-10", y: "10.02"},
        {x: "2016-02-10", y: "15.02"},
        {x: "2016-03-10", y: "50.02"},
        {x: "2016-04-10", y: "40.02"},
        {x: "2016-05-10", y: "10.02"}
    ];

    var parseTime = d3.timeParse("%y-%b-%d");


        //the line function for path 
    var lineFunction = d3.line()
        .x(function(d) {return parseTime(d.x); })
        .y(function(d) { return d.y; })
        .curve(d3.curveLinear);

    //Main svg container
    var mySVG = d3.select("svg");

    //defining the lines
    var path = mySVG.append("path");

    //plotting lines
    path
        .attr("d", lineFunction(data))
        .attr("stroke",function() { return "hsl(" + Math.random() * 360 + ",100%,50%)"; })
        .attr("stroke-width", 2)
        .attr("fill", "none");
  });

</script> 

</body> 

</html>


//模块声明
var-app=angular.module（'myApp'，[]）；
//控制器声明
应用程序控制器（'myCtrl'，函数（$scope）{
//原始数据
风险值数据=[
{x:“2016-01-10”，y:“10.02”}，
{x:“2016-02-10”，y:“15.02”}，
{x:“2016-03-10”，y:“50.02”}，
{x:“2016-04-10”，y:“40.02”}，
{x:“2016-05-10”，y:“10.02”}
];
var parseTime=d3.timeParse（“%y-%b-%d”）；
//路径的线函数
var lineFunction=d3.line（）
.x（函数（d）{返回解析时间（d.x）；}）
.y（函数（d）{返回d.y；}）
.曲线（d3.曲线线）；
//主svg容器
var mySVG=d3.select（“svg”）；
//界定界线
var path=mySVG.append（“路径”）；
//绘制线
路径
.attr（“d”，线函数（数据））
.attr（“stroke”，function（）{return”hsl（“+Math.random（）*360+”，100%，50%）；}）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）；
});

结果：

我在等一张之字形曲线的折线图。有人能帮我制作这个图表吗？或者在当前代码中需要做哪些更改才能实现它

您的图表显示，

值对于每个点都是相同的。对于d3来说

%b - abbreviated month name.

这将类似于“Jan”，具体取决于区域设置。您的数据，例如“2016-04-10”使用月份作为十进制数字[01,12]，这需要

%m

，也要注意

%y - year without century as a decimal number [00,99].
%Y - year with century as a decimal number.

因此，请尝试更改解析行

var parseTime = d3.timeParse("%Y-%m-%d");

您的图表显示，每个点的

值相同。对于d3来说

%b - abbreviated month name.

这将类似于“Jan”，具体取决于区域设置。您的数据，例如“2016-04-10”使用月份作为十进制数字[01,12]，这需要

%m

，也要注意

%y - year without century as a decimal number [00,99].
%Y - year with century as a decimal number.

因此，请尝试更改解析行

var parseTime = d3.timeParse("%Y-%m-%d");

你有两个问题：

line generator需要缩放以转换SVG中实际像素位置的数据：

var xScale = d3.scaleTime()
    .range([0,500])//hardcoded value here
    .domain(d3.extent(data, function(d){ return parseTime(d.x)}));

var yScale = d3.scaleLinear()
    .range([300,0])//hardcoded values here
    .domain([0,50]);

然后，您可以在测线生成器中使用这样的刻度：

var lineFunction = d3.line()
    .x(function(d) {return xScale(parseTime(d.x)); })
    .y(function(d) { return yScale(d.y); })
    .curve(d3.curveLinear);

您的日期格式错误。应该是：

var parseTime = d3.timeParse("%Y-%m-%d");

根据API：

%以世纪为十进制数的Y年

%m-十进制数字形式的月份[01,12]

查看演示：

var数据=[
{x:“2016-01-10”，y:“10.02”}，
{x:“2016-02-10”，y:“15.02”}，
{x:“2016-03-10”，y:“50.02”}，
{x:“2016-04-10”，y:“40.02”}，
{x:“2016-05-10”，y:“10.02”}
];
var parseTime=d3.timeParse（“%Y-%m-%d”）；
var xScale=d3.scaleTime（）.range（[0500]）.domain（d3.extent（数据，函数（d）{return parseTime（d.x）}）；
var yScale=d3.scaleLinear（）.range（[300,0]）.domain（[0,50]）；
//路径的线函数
var lineFunction=d3.line（）
.x（函数（d）{return xScale（parseTime（d.x））；}）
.y（函数（d）{返回yScale（d.y）；}）
.曲线（d3.曲线线）；
//主svg容器
var mySVG=d3.select（“svg”）；
//界定界线
var path=mySVG.append（“路径”）；
//绘制线
路径
.attr（“d”，线函数（数据））
.attr（“stroke”，function（）{return”hsl（“+Math.random（）*360+”，100%，50%）；}）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）

您有两个问题：
line generator需要缩放以转换SVG中实际像素位置的数据：
var xScale = d3.scaleTime()
    .range([0,500])//hardcoded value here
    .domain(d3.extent(data, function(d){ return parseTime(d.x)}));

var yScale = d3.scaleLinear()
    .range([300,0])//hardcoded values here
    .domain([0,50]);


然后，您可以在测线生成器中使用这样的刻度：
var lineFunction = d3.line()
    .x(function(d) {return xScale(parseTime(d.x)); })
    .y(function(d) { return yScale(d.y); })
    .curve(d3.curveLinear);

您的日期格式错误。应该是：
var parseTime = d3.timeParse("%Y-%m-%d");


根据API：
%以世纪为十进制数的Y年
%m-十进制数字形式的月份[01,12]
查看演示：

var数据=[
{x:“2016-01-10”，y:“10.02”}，
{x:“2016-02-10”，y:“15.02”}，
{x:“2016-03-10”，y:“50.02”}，
{x:“2016-04-10”，y:“40.02”}，
{x:“2016-05-10”，y:“10.02”}
];
var parseTime=d3.timeParse（“%Y-%m-%d”）；
var xScale=d3.scaleTime（）.range（[0500]）.domain（d3.extent（数据，函数（d）{return parseTime（d.x）}）；
var yScale=d3.scaleLinear（）.range（[300,0]）.domain（[0,50]）；
//路径的线函数
var lineFunction=d3.line（）
.x（函数（d）{return xScale（parseTime（d.x））；}）
.y（函数（d）{返回yScale（d.y）；}）
.曲线（d3.曲线线）；
//主svg容器
var mySVG=d3.select（“svg”）；
//界定界线
var path=mySVG.append（“路径”）；
//绘制线
路径
.attr（“d”，线函数（数据））
.attr（“stroke”，function（）{return”hsl（“+Math.random（）*360+”，100%，50%）；}）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）