我想根据每个数据点与平均值的距离绘制一个简单的折线图。 (高于、低于 % 等)。我正在为它建模 this
我似乎想不通的两个问题—— 为什么我的线稿没有?我已经浏览了每一行,但似乎无法弄清楚。
其次,如何去掉y轴上的off-scaling?缩放似乎都没有异常,我无法修复它。我认为这与缩放有关。
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.log()
.range([height, 0]);
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.ratio; }));
我可能遗漏了什么?我认为这是我还没有了解 d3 的东西。非常感谢!!
最佳答案
关于路径,代码中存在三个问题:
- 解析器命名为
parseDate
,而不是parseTime
; 您必须先解析字符串,然后才将其传递给
x
标度,而不是相反:line.x(function(d) { return x(parseDate(d.date)); });
您必须解析字符串以设置域:
x.domain(d3.extent(data, function(d) { return parseDate(d.date); }));
这是更新的 CodePen:https://codepen.io/anon/pen/qMbRoQ?editors=0011
这是一个正在运行的片段:
var data = [{
"date": "2018-08-22T14:53:37.267Z",
"value": 2200000
},
{
"date": "2018-08-21T14:53:37.267Z",
"value": 7400000
},
{
"date": "2018-08-20T14:53:37.267Z",
"value": 9500000
},
{
"date": "2018-08-19T14:53:37.267Z",
"value": 9700000
},
{
"date": "2018-08-18T14:53:37.267Z",
"value": 7100000
},
{
"date": "2018-08-17T14:53:37.267Z",
"value": 4300000
},
{
"date": "2018-08-16T14:53:37.267Z",
"value": 2500000
},
{
"date": "2018-08-15T14:53:37.267Z",
"value": 2000000
},
{
"date": "2018-08-14T14:53:37.267Z",
"value": 6400000
},
{
"date": "2018-08-13T14:53:37.267Z",
"value": 9500000
},
{
"date": "2018-08-12T14:53:37.267Z",
"value": 100000
},
{
"date": "2018-08-11T14:53:37.267Z",
"value": 4800000
},
{
"date": "2018-08-10T14:53:37.267Z",
"value": 1400000
},
{
"date": "2018-08-09T14:53:37.267Z",
"value": 6100000
},
{
"date": "2018-08-08T14:53:37.267Z",
"value": 4400000
},
{
"date": "2018-08-07T14:53:37.267Z",
"value": 7000000
},
{
"date": "2018-08-06T14:53:37.267Z",
"value": 6100000
},
{
"date": "2018-08-05T14:53:37.267Z",
"value": 300000
},
{
"date": "2018-08-04T14:53:37.267Z",
"value": 2900000
},
{
"date": "2018-08-03T14:53:37.268Z",
"value": 2000000
},
{
"date": "2018-08-02T14:53:37.268Z",
"value": 300000
},
{
"date": "2018-08-01T14:53:37.268Z",
"value": 800000
},
{
"date": "2018-07-31T14:53:37.268Z",
"value": 1200000
},
{
"date": "2018-07-30T14:53:37.268Z",
"value": 9000000
},
{
"date": "2018-07-29T14:53:37.268Z",
"value": 8600000
},
{
"date": "2018-07-28T14:53:37.268Z",
"value": 6900000
},
{
"date": "2018-07-27T14:53:37.268Z",
"value": 3400000
},
{
"date": "2018-07-26T14:53:37.268Z",
"value": 8100000
},
{
"date": "2018-07-25T14:53:37.268Z",
"value": 2900000
},
{
"date": "2018-07-24T14:53:37.268Z",
"value": 6400000
}
]
var margin = {
top: 30,
right: 30,
bottom: 40,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatPercent = d3.format("+.0%"),
formatChange = function(x) {
return formatPercent(x - 1);
},
parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
// var parseTime = d3.time.Parse("%Y-%m-%dT%H:%M:%S.%LZ");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.log()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(-width, 0)
.tickFormat(formatChange);
var line = d3.svg.line()
.x(function(d) {
return x(parseDate(d.date));
})
.y(function(d) {
return y(d.ratio);
});
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var gX = svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")");
var gY = svg.append("g")
.attr("class", "axis axis--y");
gY.append("text")
.attr("class", "axis-title")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.text("Change in Price");
var baseValue = +data[6].value;
console.log(baseValue)
data.forEach(function(d) {
d.date = d.date;
console.log(d.date)
d.ratio = d.value / baseValue;
console.log(d.ratio)
});
// Compute price relative to base value (hypothetical purchase price).
x.domain(d3.extent(data, function(d) {
return parseDate(d.date);
}));
y.domain(d3.extent(data, function(d) {
return d.ratio;
}));
// Use a second linear scale for ticks.
yAxis.tickValues(d3.scale.linear()
.domain(y.domain())
.ticks(9));
gX.call(xAxis);
gY.call(yAxis)
.selectAll(".tick")
.classed("tick--one", function(d) {
return Math.abs(d - 1) < 1e-6;
});
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
.axis {
font: 10px sans-serif;
}
.axis-title {
text-anchor: end;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis--x path {
display: none;
}
.axis--y .tick:not(.tick--one) line {
stroke-opacity: .15;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
stroke-linejoin: round;
stroke-linecap: round;
}
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
</body>
PS:关于基线问题,这不是很清楚,我建议你发布一个新问题,并附上相关解释:在 S.O. 上每个问题保持一个问题总是一个好习惯。
关于javascript - 如何从基线得出百分比?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52014074/