Question

可以看到jsfiddle示例here

我期望图表能够使用“重绘”功能中包含的新数据集正确更新，但这种情况不会发生。

尽管使用新数据集更新了当前的rects，但问题似乎是代码的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);
    });

任何帮助/见解都将不胜感激。

Answer 1

由于第一次抽奖工作正常，我把它变成了一个功能。只需要删除已经编写的SVG以使其可重用： JSFiddle

<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>

更新d3.js中的堆积条形图（包括JSFiddle）

1 个答案: