Javascript 更新d3.js中的堆叠条形图（包括JSFIDLE）

可以看到JSFIDLE示例

我希望图表能够使用函数redraw中包含的新数据集进行正确更新，但是这并没有发生

尽管当前的RECT已使用新数据集更新，但问题似乎在于代码的enter.append部分不起作用：

var groups = svg.selectAll('g')
  .data(dataset, retd);

groups.style('fill', function (d, i) {
      return colours(i);
});

groups.enter()
  .append('g')
  .style('fill', function (d, i) {
      return colours(i);
});

groups.exit().remove();

//update the Rects
var rects = groups.selectAll('rect')
            .data(function (d) {
               return d;
            }, thisy);

rects.transition()
  .attr('x', function (d) {
      return xScale(d.x0);
  })
  .attr('y', function (d, i) {
      return yScale(d.y);
  })
  .attr('height', function (d) {
      return yScale.rangeBand();
  })
  .attr('width', function (d) {
      return xScale(d.x);
  });

rects.enter()
    .append('rect')
    .attr('x', function (d) {
        return xScale(d.x0);
    })
    .attr('y', function (d, i) {
        return yScale(d.y);
    })
    .attr('height', function (d) {
        return yScale.rangeBand();
    })
    .attr('width', function (d) {
        return xScale(d.x);
    });

---

如果您有任何帮助/见解，我们将不胜感激。

由于第一次绘制效果很好，我将其转化为一个函数。只需删除已编写的SVG即可使其可重用：

---

在JSFIDLE中，重画函数在哪里声明？FIDLE不正确。它现在应该被修复了，很抱歉。你希望发生什么事情而没有发生？我希望它能用新的数据集正确更新。注意：函数redraw中的数据集与执行redraw函数之前使用的数据集相比有许多不同的IS值。在小提琴中，关于IS，是否要确保每个IS都是整数？循环：d.IS=+d.IS；不是打是。

<button id="reset">Redraw</button>

<script>

document.getElementById('reset').onclick = function() {
    var dataset = [
        {"data":[
            {"IssueMonth":"Apr","IS":"350","month":"Apr"},
            {"IssueMonth":null,"IS":"100","month":"Aug"},
            {"IssueMonth":null,"IS":"0","month":"Dec"}],
         "name":"CHF"},
        {"data":[
            {"IssueMonth":null,"IS":"100","month":"Apr"},
            {"IssueMonth":null,"IS":"200","month":"Aug"},
            {"IssueMonth":null,"IS":"40","month":"Dec"}],
         "name":"GBP"}
    ];
    drawit(dataset);
}

var dataset = [
    {"data":[
        {"IssueMonth":"Apr","IS":"350","month":"Apr"},
        {"IssueMonth":null,"IS":"0","month":"Aug"},
        {"IssueMonth":null,"IS":"0","month":"Dec"}],
     "name":"CHF"},
    {"data":[
        {"IssueMonth":null,"IS":"100","month":"Apr"},
        {"IssueMonth":null,"IS":"0","month":"Aug"},
        {"IssueMonth":null,"IS":"50","month":"Dec"}],
     "name":"GBP"}
];

drawit(dataset);

function drawit(dataset) {

    var margins = {
        top: 40,
        left: 40,
        right: 40,
        bottom: 40
    };

    var width = 400;
    var height = 500 - margins.top - margins.bottom;

    var series = dataset.map(function (d) {
        return d.name;
    });

    var dataset = dataset.map(function (d) {
        return d.data.map(function (o, i) {
            // Structure it so that your numeric
            // axis (the stacked amount) is y
            return {
                y: +o.IS,
                x: o.month
            };
        });
    });

    stack = d3.layout.stack();

    stack(dataset);

    var dataset = dataset.map(function (group) {
        return group.map(function (d) {
            // Invert the x and y values, and y0 becomes x0
            return {
                x: d.y,
                y: d.x,
                x0: d.y0
            };
        });
    });

    d3.select("svg").remove();    
    var svg = d3.select('body')
    .append('svg')
    .attr('width', width + margins.left + margins.right)
    .attr('height', height + margins.top + margins.bottom)
    .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')

    var xMax = d3.max(dataset, function (group) {
        return d3.max(group, function (d) {
            return d.x + d.x0;
        });
    })

    var xScale = d3.scale.linear()
    .domain([0, xMax])
    .range([0, width]);

    var months = dataset[0].map(function (d) {
        return d.y;
    });

    var yScale = d3.scale.ordinal()
    .domain(months)
    .rangeRoundBands([0, height], .1);

    var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom');

    var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient('left');

    var colours = d3.scale.category20();

    var groups = svg.selectAll('g')
    .data(dataset)
    .enter()
    .append('g')
    .style('fill', function (d, i) {
        return colours(i);
    });

    var rects = groups.selectAll('rect')
    .data(function (d) {
        return d;
    })
    .enter()
    .append('rect')
    .attr('x', function (d) {
        return xScale(d.x0);
    })
    .attr('y', function (d, i) {
        return yScale(d.y);
    })
    .attr('height', function (d) {
        return yScale.rangeBand();
    })
    .attr('width', function (d) {
        return xScale(d.x);
    });

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

    svg.append('g')
    .attr('class', 'y axis')
    .call(yAxis);
}

</script>