[英]d3 transform scale date to x position?
I have a linear y scale with a time series x scale. 我有一个线性y比例尺和一个时间序列x比例尺。 I want to put an overlay that follows the x/y value (similar to http://bl.ocks.org/mbostock/3902569 ).
我想放置一个跟随x / y值的叠加层(类似于http://bl.ocks.org/mbostock/3902569 )。
The issue is that I'm not able to transform to the proper x scale value; 问题是我无法转换为正确的x比例值; for example when I
mouseover
my chart it outputs (this data is correct): 例如,当我将
mouseover
图表上时,其输出(此数据正确):
{ y: 0.05, x: "2015-07-26 15:08:47" }
{ y: 0.05, x: "2015-07-26 15:08:47" }
{ y: 0.05, x: "2015-07-26 15:08:47" }
Now I want to use this data to draw a point at that location; 现在,我想使用这些数据在该位置绘制一个点。 the issue is that I cannot replicate the above bl.locks.org example, and the
transform
isn't able to use the x position as a date; 问题是我无法复制上面的bl.locks.org示例,并且
transform
无法使用x位置作为日期; so how can I transform that x date to the point on the chart? 那么如何将x日期转换为图表上的点?
My mousemove
is below: 我的
mousemove
如下:
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height,0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var varea = d3.svg.area()
.defined(function(d) { return d.y != null; })
.x(function(d) { return x(parseDate(d.x)); })
.y0(height)
.y1(function(d) { return y(d.y); });
var svg = d3.select(".swatch").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 + ")");
x.domain(d3.extent(data, function(d) { return parseDate(d.x); }));
y.domain([0, d3.max(data, function(d) {
if (d.y >= 1) {
return d.y
}
return 1;
})]);
svg.append("path")
.attr("class", "area")
.attr("d", varea(data));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var focus = svg.append("g")
.attr("class", "focus")
.attr("display", "none");
focus.append("circle")
.attr("r", 4.5);
focus.append("text")
.attr("x", 9)
.attr("dy", ".35em");
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() {
focus.style("display", null);
})
.on("mouseout", function() {
focus.style("display", "none");
})
.on("mousemove", function() {
var x0 = x.invert(d3.mouse(this)[0]);
var bisect = d3.bisector(function(d) { return parseDate(d.x); }).right;
var item = data[bisect(data, x0)];
focus.attr("transform", "translate(" + x(parseDate(item.x)) + "," + y(item.y) + ")");
focus.select("text").text(item.y);
console.log(x(parseDate(item.x)));
console.log(y(item.y));
});
This code produces errors like the following in the console: 此代码在控制台中产生类似于以下错误:
Unexpected value translate(NaN,120) parsing transform attribute.
So, the question is how do I convert the date to a proper coordinate? 因此,问题是如何将日期转换为适当的坐标?
Alright, so there were a couple of problems with my code. 好了,所以我的代码有几个问题。
I wasn't parsing the x
value as a date; 我没有将
x
值解析为日期; so I started parsing it with parseDate
(see sample code) and then passed it to the x
scale; 因此,我开始使用
parseDate
对其进行parseDate
(请参见示例代码),然后将其传递给x
标度; this allowed me to get proper location on the chart. 这使我能够在图表上找到合适的位置。
The second issue was that display
wasn't be set properly (setting it to null
in Firefox wasn't allowing it to appear). 第二个问题是
display
设置不正确(在Firefox中将其设置为null
不允许其显示)。 So I changed that to display: inline;
所以我将其更改为
display: inline;
and it started showing up on the chart. 它开始出现在图表上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.