个人中心
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
文章推荐： javascript - 如何在 JavaScript 中使用 setAttributeNS() 捕获错误？
文章推荐： javascript - 如何使用 ng-repeat 将 API 调用返回到 View 的对象数量设为 'print'？
文章推荐： Javascript 将数据导出到 CSV 文件
文章推荐： javascript - 如何在casperjs上单击没有id的按钮
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com