我如何从基线中得出一个百分比? [英] How do I draw a percentage from baseline?
问题描述
我希望根据每个数据点距均值的距离绘制一个简单的折线图. (高于，低于等的百分比).我正在根据此
I'm looking to draw a simple line chart based off of each data point's distance from the mean. (% above, below, etc). I'm modeling it off of this
我似乎无法弄清楚的两个问题- 为什么我的线条图没有?我遍历了每一行，似乎无法弄清楚.
The two problems that I can't seem to figure out- Why isn't my line drawing? I've been through each line and can't seem to figure it out.
其次，我如何在y轴上缩小比例?缩放比例似乎都没有异常，我无法解决.我认为这与缩放有关.
Secondly, How do I take out the off- scaling on the y-axis? None of the scalings seems to be abnormal and I can't fix it. I assume it has to do with the 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的东西.非常感谢！
What might I be missing? I assume it's something I just haven't learned about d3 yet. Thanks so much!!
推荐答案
关于路径，代码中存在三个问题:
There are three problems in the code, regarding the path:
- 解析器命名为
parseDate，而不是parseTime; -
您必须首先解析字符串，然后才将其传递到
x刻度，而不是相反:
- The parser is named
parseDate, notparseTime; You have to parse the string first and only then passing it to the
xscale, not the other way around:
line.x(function(d) { return x(parseDate(d.date)); });
您必须分析字符串以设置域:
You have to parse the strings to set the domain:
x.domain(d3.extent(data, function(d) { return parseDate(d.date); }));
这是更新的CodePen: https://codepen.io/anon/pen/qMbRoQ?editors = 0011
Here is the updated CodePen: https://codepen.io/anon/pen/qMbRoQ?editors=0011
这是一个正在运行的代码段:
And here a running snippet:
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上，每个问题都保留一个一个问题始终是一个好习惯.
PS: Regarding the baseline issue, which is not clear, I suggest you post a new question, with the relevant explanation: it's always a good practice keeping one problem per question here at S.O.
这篇关于我如何从基线中得出一个百分比?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
