gpt4 book ai didi

javascript - D3 v4 xAxis 缩放将 x 返回为 NaN 使得 rescale(x) 无法完成

转载 作者:行者123 更新时间:2023-11-28 18:00:21 25 4
gpt4 key购买 nike

我正在尝试实现以 x 轴作为日期格式的缩放选项。这是代码示例:

var margin = {
top: 20,
right: 20,
bottom: 40,
left: 100
},
svgWidth = 800,
svgHeight = 500,
width = svgWidth - margin.left - margin.right,
height = svgHeight - margin.top - margin.bottom;

svg = d3.select('body')
.append("svg")
.attr("style", "width: " + svgWidth + "px\; height: " + svgHeight + "px\;");

var x = d3.scaleUtc().range([0, width])
.domain([new Date("3/12/2017"), new Date("3/30/2017")]);

var y = d3.scaleBand()
.range([height, 0])
.padding(0.1)
.domain(["test"])

var xAxis = d3.axisBottom(x)
.tickFormat(d3.utcFormat("%m-%d"));

var yAxis = d3.axisLeft(y);

var zoom = d3.zoom()
.scaleExtent([1, Infinity])
.translateExtent([0, 0], [width, height])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);

var xLine = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + height + ")")
.attr("class", "xAxis")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "middle");
var yLine = svg.append("g")
.attr("transform", "translate(" + margin.left + ", 0)")
.attr("class", "yAxis")
.call(yAxis)
.selectAll("text")
.attr("class", "cateName")
.style("text-anchor", "end");

svg.call(zoom);

function zoomed() {
xLine.call(xAxis.scale(d3.event.transform.rescaleX(x)));
};

想法很简单,当你水平平移时,xAxis会调整位置。但是,当您单击 SVG 时,x 轴上的所有标签都会消失。我试图调查它,但似乎我的 xsource codeNaN

为什么会发生这种情况?我错过了什么吗?JSFiddle 在这里:https://jsfiddle.net/amyytnt0/1/

感谢您的帮助!

最佳答案

看来我犯了一个非常简单的错误:zoom.translateExtent() 应位于 1 个参数中,而不是 2 个参数中。所以修复应该是:zoom.translateExtent([[0, 0], [宽度, 高度]])

在这里找到答案:https://github.com/d3/d3-zoom/issues/73#issuecomment-263326469

关于javascript - D3 v4 xAxis 缩放将 x 返回为 NaN 使得 rescale(x) 无法完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43620460/

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