gpt4 book ai didi

javascript - 使用 d3 更新我的条形图时出错

转载 作者:行者123 更新时间:2023-12-03 08:18:01 25 4
gpt4 key购买 nike

当我以为 d3 处于控制状态时,我遇到了这个问题...我无法找出为什么当我使用空数据数组更新 barChart 时我的代码崩溃...

这是我的代码:

<!DOCTYPE html>
<html>
<head>
<title>Simple tables in D3</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<style type="text/css">

.chart rect {
fill: steelblue;
}

.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

.x.axis path {
display: none;
}

.axis {
font: 10px sans-serif;
}

</style>
</head>
<body>

<svg class="chart">
</svg>

<script>
var scanCounters = JSON.parse("[{\"scan\":\"111\",\"repetition\":3},{\"scan\":\"222\",\"repetition\":2},{\"scan\":\"333\",\"repetition\":4},{\"scan\":\"123\",\"repetition\":2},{\"scan\":\"456\",\"repetition\":1},{\"scan\":\"789\",\"repetition\":1}]");

var scanCounters2 = JSON.parse("[{\"scan\":\"111\",\"repetition\":8},{\"scan\":\"222\",\"repetition\":6},{\"scan\":\"333\",\"repetition\":5},{\"scan\":\"123\",\"repetition\":3}]");

var scanCounters3 = JSON.parse("[]");

var columns = ["scan", "repetition"];

var margin = {top: 20, right: 30, bottom: 30, left: 40};

var width = 960;
var height = 500;

var innerWidth = width - margin.left - margin.right;
var innerHeight = height - margin.top - margin.bottom;

var bcScan = barChart(600, 400, "chart");
bcScan.update(scanCounters);

setTimeout(function(){
bcScan.update(scanCounters2);
}, 1000);

setTimeout(function(){
bcScan.update(scanCounters3);
}, 2000);

function barChart(w, h, node) {

var bC = {};

var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = w - margin.left - margin.right,
height = h - margin.top - margin.bottom;

var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);

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 svg = d3.select("." + node)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")");

svg.append("g")
.attr("class", "y axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -40)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");

bC.update = function(data) {

x.domain(data.map(function (d) {
return d[Object.keys(d)[0]];
}));
y.domain([0, d3.max(data, function (d) {
return d[Object.keys(d)[1]];
})]);

svg.select(".x.axis")
.transition()
.duration(300).call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");

svg.select(".y.axis")
.transition()
.duration(300)
.call(yAxis);

var bars = svg.selectAll(".bar").data(data, function (d) {
return d[Object.keys(d)[0]];
});

bars.exit()
.transition()
.duration(300)
.attr("y", y(0))
.attr("height", height - y(0))
.style('fill-opacity', 1e-6)
.remove();

bars.enter()
.append("rect")
.attr("class", "bar")
.attr("y", y(0))
.attr("height", height - y(0));

var trans = bars.transition().duration(300).attr("x", function (d) {
return x(d[Object.keys(d)[0]]);
});

trans.attr("width", x.rangeBand())
.attr("y", function (d) {
return y(d[Object.keys(d)[1]]);
})
.attr("height", function (d) {
return height - y(d[Object.keys(d)[1]]);
});

};

return bC;
}

</script>
</body>
</html>

问题是当我调用 bcScan.update(scanCounters3); 时,其中 scanCounters3 是一个空数组。

这是错误消息:

Error: Invalid value for attribute height="NaN"

Error: Invalid value for attribute y="NaN"

问题:有人可以帮助我理解它崩溃的原因吗?

谢谢

最佳答案

@EthanJewett,是正确的,如果你在每次迭代时查看你的 y.domain() :

[0, 4]
[0, 8]
[0, NaN]

因此,在最后一次迭代中,退出转换正在对 NaN 进行数学运算:

.attr("y", y(0))
.attr("height", height - y(0))

我会完全删除这些行并进行退出转换:

       bars.exit()
.transition()
.duration(300)
.style('fill-opacity', 1e-6)
.remove();

关于javascript - 使用 d3 更新我的条形图时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33852242/

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