每当在 d3 v6.3.1 中更新数组时，如何更新条形图数据？答案

【问题标题】：How to update bar graph data whenever array is updated in d3 v6.3.1?每当在 d3 v6.3.1 中更新数组时，如何更新条形图数据？
【发布时间】：2021-01-06 21:44:36
【问题描述】：

我正在尝试更新使用 d3.js 创建的条形图，以显示定期更新的数组中的值。目前，我有一个函数 d3Data，它在页面加载时调用（使用 jQuery），并作为一个函数在页面上单击按钮时调用。此 d3 数据更新数组，然后调用另一个函数 d3New，该函数应该重新呈现条形图。

如果使用数组中的硬编码数据，则条形图能够与条形矩形一起呈现。但是，由于我将起始数组初始化为空，我无法看到矩形，因为我的条形图似乎没有根据该数组中的更新值显示矩形。

这是我在条形图中显示矩形的逻辑：

var rects = svg.selectAll("rect")
.data(data)

rects.enter().append("rect")

rects.exit().remove()

rects.attr("x", function(d, i) { return (i * 2.0 + 1.3) * barWidth; })
.attr("y", function(d,i) {
    return Math.min(yScale(0), yScale(d))
})


.attr("height", function(d) {
    // the height of the rectangle is the difference between the scale value and yScale(0);
    return Math.abs(yScale(0) - yScale(d));
}) 
.attr("width", barWidth)
.style("fill", "grey")
.style("fill", function(d,i) { return color[i];})

我了解 enter() 函数最初将数据连接到矩形元素，而 exit 函数用于在矩形重新渲染时删除任何先前的矩形元素值。但是，没有矩形被渲染到屏幕上，不知道为什么？这是它的样子：

任何帮助都会很棒

编辑：

下面是这两个函数中的一些：

function d3Data() {
    var dataArray = [];
    for (var key in gradeFrequency) {
        dataArray.push(gradeFrequency[key]);
    }
    d3New(dataArray);
}
function d3New(data) {
    var height = 500;
    var width = 500;
    var margin = {left: 100, right: 10, top: 100, bottom: 20};
    var color = ["#C6C7FF", "#8E8EFC", "#5455FF", "#8E8EFC", "#C6C7FF"];

    var svg = d3.select("body").append("svg")
    .attr('height', height)
    .attr('width', width)
    .append("g")
    .attr("transform", "translate("+ [margin.left + "," + margin.top] + ")");

    var barWidth = 30; 

    var chartHeight = height-margin.top-margin.left;  

    var xScale= d3.scaleBand()
        .domain(["A", "B", "C", "D", "F"])     
        .range([100, 450])            
        .padding([0.8]) 

    // Draw the axis
    svg.append("g")
        .attr("transform", "translate(-100,300)")   
        .call(d3.axisBottom(xScale));


    var yScale = d3.scaleLinear()
    .domain([0, 1.0])
    .range([chartHeight, 0]);

    var rects = svg.selectAll("rect")
    .data(data)

    rects.enter().append("rect").merge(rects)

    rects.exit().remove()

【问题讨论】：

我认为您没有为任何人提供足够的代码来尝试回答这个问题。请更新您的问题以重现该问题。如果有机会，我会很幸运地将这一行 rects.enter().append("rect") 更新为 rects = rects.enter().append("rect").merge(rects)....
已更新以显示更多这两种功能。我还添加了合并，但似乎每次调用 d3Data 时都会将后续相同的图形呈现到页面

标签： javascript jquery d3.js

【解决方案1】：

我想出了如何解决我的问题。不得不补充：

 d3.selectAll("svg").remove();

到函数的开头，以便删除以前过时的图形，并在 .exit().remove() 之前添加“rect”的属性。所以而不是：

var rects = svg.selectAll("rect")
    .data(data)

    rects.enter().append("rect").merge(rects)

    rects.exit().remove()

    rects.attr(..).attr(..).attr(..)

我做到了：

rects.enter().append("rect").merge("rect").attr(..).attr(..).attr(..) and so on.

rects.exit().remove()

由于矩形的属性也需要更新，因此它们必须在 .exit() 和 .remove() 调用之前进行

【讨论】：