Question

在制作当前折线图时，我试图绘制频率与时间的关系。但是，我没有收到任何错误，但我也只是一条直线。有人可以帮我吗？

<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>

结果：

我期待着曲折曲线的折线图。有人可以帮助我制作该图表，或者当前代码需要进行哪些更改才能实现它？

Answer 1

你有两个问题：

线路生成器需要 scale 来转换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 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-%m-%d");
		
		var xScale = d3.scaleTime().range([0,500]).domain(d3.extent(data, function(d){ return parseTime(d.x)}));
		
		var yScale = d3.scaleLinear().range([300,0]).domain([0,50]);


        //the line function for path 
    var lineFunction = d3.line()
        .x(function(d) {return xScale(parseTime(d.x)); })
        .y(function(d) { return yScale(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 src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
<svg width="500" height="300"></svg>

Answer 2

您的图表显示每个点的x值相同。 d3的docs说

%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折线图 - 直线时间的数字（无误差）

2 个答案: