我正在使用 D3,我该如何纠正 "t is not iterable error"?
I'm using D3, how do I rectify "t is not iterable error"?
我在 D3 中收到以下错误:TypeError: t is not iterable at Object.H [as min]
我修改的代码来自 v3,但我认为我已将所有内容更改为 v7。
我相信我已经找到导致错误的原因,但我不知道为什么会发生错误以及如何解决它。这就是我认为问题的来源,因为当我将两个域行中的代码更改为 .domain([0,1])
时,问题就消失了。
var xScale = d3.scaleLinear()
.domain([
d3.min([0,d3.min(data,function (d) { return d.AvgPerc; })]),
d3.max([0,d3.max(data,function (d) { return d.AvgPerc; })])
])
.range([0,w])
var yScale = d3.scaleLinear()
.domain([
d3.min([0,d3.min(data,function (d) { return d.ActualPerc; })]),
d3.max([0,d3.max(data,function (d) { return d.ActualPerc; })])
])
.range([h,0])
这里是完整的参考代码,以备不时之需(我也有 xAxis 和 yAxis 变量的错误,但一次一步!):
// Variables
var body = d3.select('.d3block')
var margin = { top: 50, right: 50, bottom: 50, left: 50 }
var h = 500 - margin.top - margin.bottom
var w = 600 - margin.left - margin.right
var formatDecimal = d3.format('.2')
// Scales
var xScale = d3.scaleLinear()
.domain([
d3.min([0,d3.min(data,function (d) { return d.AvgPerc; })]),
d3.max([0,d3.max(data,function (d) { return d.AvgPerc; })])
])
.range([0,w])
var yScale = d3.scaleLinear()
.domain([
d3.min([0,d3.min(data,function (d) { return d.ActualPerc; })]),
d3.max([0,d3.max(data,function (d) { return d.ActualPerc; })])
])
.range([h,0])
// SVG
var svg = body.append('svg')
.attr('height',h + margin.top + margin.bottom)
.attr('width',w + margin.left + margin.right)
.append('g')
.attr('transform','translate(' + margin.left + ',' + margin.top + ')')
// X-axis
var xAxis = d3.svg.axis()
.scale(xScale)
.tickFormat(formatDecimal)
.ticks(5)
.orient('bottom')
// Y-axis
var yAxis = d3.svg.axis()
.scale(yScale)
.tickFormat(formatDecimal)
.ticks(5)
.orient('left')
// Circles
var circles = svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx',function (d) { return xScale(d.AvgPerc) })
.attr('cy',function (d) { return yScale(d.ActualPerc) })
.attr('r','10')
.attr('stroke','black')
.attr('stroke-width',1)
.attr('fill', 'rgb(139,71,38)')
所以问题是双重的,原始代码和 ksp 的初始响应(简化为 d3.max(data,function (d) { return d.ActualPerc; })
)都可以工作。
两个问题是:
- 我的代码的第一行我省略了而且不应该省略的是不正确的,我使用了
d3.csv('data.csv', function(data) {...})
而我应该使用 d3.csv('data.csv').then(function(data) {...})
d3.svg.axis
无效,必须更改为 d3.axisBottom
并删除 .orient(bottom)
感谢@ksp585 对轴域的原始帮助,解释澄清了事情!
我在 D3 中收到以下错误:TypeError: t is not iterable at Object.H [as min]
我修改的代码来自 v3,但我认为我已将所有内容更改为 v7。
我相信我已经找到导致错误的原因,但我不知道为什么会发生错误以及如何解决它。这就是我认为问题的来源,因为当我将两个域行中的代码更改为 .domain([0,1])
时,问题就消失了。
var xScale = d3.scaleLinear()
.domain([
d3.min([0,d3.min(data,function (d) { return d.AvgPerc; })]),
d3.max([0,d3.max(data,function (d) { return d.AvgPerc; })])
])
.range([0,w])
var yScale = d3.scaleLinear()
.domain([
d3.min([0,d3.min(data,function (d) { return d.ActualPerc; })]),
d3.max([0,d3.max(data,function (d) { return d.ActualPerc; })])
])
.range([h,0])
这里是完整的参考代码,以备不时之需(我也有 xAxis 和 yAxis 变量的错误,但一次一步!):
// Variables
var body = d3.select('.d3block')
var margin = { top: 50, right: 50, bottom: 50, left: 50 }
var h = 500 - margin.top - margin.bottom
var w = 600 - margin.left - margin.right
var formatDecimal = d3.format('.2')
// Scales
var xScale = d3.scaleLinear()
.domain([
d3.min([0,d3.min(data,function (d) { return d.AvgPerc; })]),
d3.max([0,d3.max(data,function (d) { return d.AvgPerc; })])
])
.range([0,w])
var yScale = d3.scaleLinear()
.domain([
d3.min([0,d3.min(data,function (d) { return d.ActualPerc; })]),
d3.max([0,d3.max(data,function (d) { return d.ActualPerc; })])
])
.range([h,0])
// SVG
var svg = body.append('svg')
.attr('height',h + margin.top + margin.bottom)
.attr('width',w + margin.left + margin.right)
.append('g')
.attr('transform','translate(' + margin.left + ',' + margin.top + ')')
// X-axis
var xAxis = d3.svg.axis()
.scale(xScale)
.tickFormat(formatDecimal)
.ticks(5)
.orient('bottom')
// Y-axis
var yAxis = d3.svg.axis()
.scale(yScale)
.tickFormat(formatDecimal)
.ticks(5)
.orient('left')
// Circles
var circles = svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx',function (d) { return xScale(d.AvgPerc) })
.attr('cy',function (d) { return yScale(d.ActualPerc) })
.attr('r','10')
.attr('stroke','black')
.attr('stroke-width',1)
.attr('fill', 'rgb(139,71,38)')
所以问题是双重的,原始代码和 ksp 的初始响应(简化为 d3.max(data,function (d) { return d.ActualPerc; })
)都可以工作。
两个问题是:
- 我的代码的第一行我省略了而且不应该省略的是不正确的,我使用了
d3.csv('data.csv', function(data) {...})
而我应该使用d3.csv('data.csv').then(function(data) {...})
d3.svg.axis
无效,必须更改为d3.axisBottom
并删除.orient(bottom)
感谢@ksp585 对轴域的原始帮助,解释澄清了事情!