gpt4 book ai didi

d3.js - 解析日期的 D3 函数不起作用

转载 作者:行者123 更新时间:2023-12-04 10:47:56 26 4
gpt4 key购买 nike

我有一个 d3 可视化,在当前的稳定版本 ( 3.x ) 中运行良好,但我想实现 Pan & Zoom功能所以我升级到 4.alpha .

随着语法的变化,这引发了很多错误。我更新了变量名称,但是还有一个与以下代码的第二行有关的错误:

function type(d) {
d.date = formatDate.parse(d.date);
d.Flux = +d.Flux;
return d;
}

通过浏览器打开页面源码,看到 formatDate.parse is not a function.可视化当前未呈现。

我试过梳理 D3 4.alpha documentation ,无济于事。

在代码中进一步, formatDate定义如下:
var formatDate = d3.timeFormat("%d-%b-%y");

我很高兴发布原始代码,它大约有 70 行长,而且有点 hacky tho:
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 1400// - margin.left - margin.right,
height = 1400// - margin.top - margin.bottom;
var formatDate = d3.timeFormat("%d-%b-%y");
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.Flux); });
var svg = d3.selectAll("#ExoPlanet, #ExoPlanet2").append("svg")
.attr("width", '90%')
.attr("height", '70%')
.attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
.attr('preserveAspectRatio','xMinYMin')
.append("g")
.call(d3.zoom()
.scaleExtent([1 / 2, 4])
.on("zoom", zoomed)) ;
function zoomed() {
var transform = d3.event.transform;
circle.attr("transform", function(d) {
return "translate(" + transform.applyX(d[0]) + "," + transform.applyY(d[1]) + ")";
});
}

d3.tsv("/FluxTime.tsv", type, function(error, data) {
if (error) throw error;
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.Flux; }));
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 2.0)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.Flux); })
.attr("stroke", "#CE9A76");
});
function type(d) {
d.date = formatDate.parse(d.date));
d.Flux = +d.Flux;
return d;

}

数据集中前 8 个条目的屏幕截图:

datums

最佳答案

在 D3 3.5 中,您可以按照自己的方式进行解析,设置时间格式...

var formatDate = d3.time.format("%d-%b-%y");

...然后使用这个时间格式来解析:
d.date = formatDate.parse(d.date);

但是,使用 D3 4.0,您必须以不同的方式解析日期,使用 timeParse :
var parseTime = d3.timeParse("%d-%b-%y");

然后,修改您的访问器功能:
function type(d) {
d.date = parseTime(d.date);
d.Flux = +d.Flux;
return d;
}

关于d3.js - 解析日期的 D3 函数不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37774053/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com