[英]d3 transform scale date to x position?
我有一個線性y比例尺和一個時間序列x比例尺。 我想放置一個跟隨x / y值的疊加層(類似於http://bl.ocks.org/mbostock/3902569 )。
問題是我無法轉換為正確的x比例值; 例如,當我將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" }
現在,我想使用這些數據在該位置繪制一個點。 問題是我無法復制上面的bl.locks.org示例,並且transform
無法使用x位置作為日期; 那么如何將x日期轉換為圖表上的點?
我的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));
});
此代碼在控制台中產生類似於以下錯誤:
Unexpected value translate(NaN,120) parsing transform attribute.
因此,問題是如何將日期轉換為適當的坐標?
好了,所以我的代碼有幾個問題。
我沒有將x
值解析為日期; 因此,我開始使用parseDate
對其進行parseDate
(請參見示例代碼),然后將其傳遞給x
標度; 這使我能夠在圖表上找到合適的位置。
第二個問題是display
設置不正確(在Firefox中將其設置為null
不允許其顯示)。 所以我將其更改為display: inline;
它開始出現在圖表上。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.