Question

我正在创建一个带有d3.js的条形图，在某些情况下会有数百个条目，所以为了保持可读性，我创建了“前10个”和“下10个”按钮。我可以通过创建变量c来禁用“之前的10”按钮来加载不存在的数据，当您单击下一个或上一个按钮时，该变量将+1或-1添加到其中，当它命中0时，它会禁用。但是，“下一个10”按钮是不同的，因为每组数据具有不同的行数（条形）。有没有什么办法可以在按下csv文件的末尾时禁用按钮？

这是我尝试过的，但它似乎没有按照我想要的方式工作。

HTML

<div class="buttons">
   <button type="button" id="bt1" class="bt1">Previous 10</button>
   <button type="button" id="bt2" class="bt2">Next 10</button>
</div>

JS

            d3.select("#bt2").on("click", () =>{
                a += 10;
                b += 10;
                c += 1;
                update(a,b,c);
                });

            d3.select("#bt1").on("click", () => {
                a -= 10;
                b -= 10;
                c -= 1;
                update(a,b,c);
                });

var counts = {};
   data.forEach(function(r) {
   if (!counts[r.Charge]) {
   counts[r.Charge] = 0; }
   counts[r.Charge]++;
});

if (c === 1) { d3.select("#bt1").attr('disabled', 'disabled'); }   
else { document.getElementById("bt1").removeAttribute('disabled'); }

if ( counts === "0") { d3.select("#bt2").attr('disabled', 'disabled'); }   
else { document.getElementById("bt2").removeAttribute('disabled'); }

Answer 1

我不能确定没有整个代码（如果你可以创建它，JSFiddle将非常有用），但是在最后一个if语句中你= =将对象计数与“0”进行比较。我相信这是真的，因为计数是一个对象。您确定不想这样做：counts[some_value] === 0（或者，如果您想检查对象计数是否为空 - Object.keys(counts).length === 0？

当没有更多可用数据时，禁用“下一步”按钮

1 个答案: