在制作当前折线图时，我试图绘制频率与时间的关系图。但是，我没有收到任何错误，而且我得到的只是一条直线。有人可以帮我吗？
<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>
结果:
我期待的是锯齿形曲线的折线图。有人可以帮助我制作该图表或当前代码需要进行哪些更改才能实现该图表？
最佳答案
你有两个问题:
线生成器需要缩放来转换 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 - 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/