个人中心
gpt4 book ai didi

javascript - D3 折线图 - 数字与时间成直线(无错误)

转载 作者：行者123 更新时间：2023-11-30 08:29:05 26 4
gpt4 key购买 nike

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

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

结果:

enter image description here

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

最佳答案

你有两个问题:

  1. 线生成器需要缩放来转换 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);

  1. 您的日期格式有误。应该是:

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

根据 API:

%Y - year with century as a decimal number.

%m - month as a decimal number [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>

关于javascript - D3 折线图 - 数字与时间成直线(无错误)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40655477/

26 4 0
文章推荐： java - quartz : skipping duplicate job fires scheduled with same fire time
文章推荐： java - 如何获取我的 war 文件的某些文件夹中的文件列表？
文章推荐： java - 在我的 Java GUI 中包含图形/形状
文章推荐： javascript - "A network error has occurred"电子邮件/密码注册 Firebase 时出错
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com