D3.js 将d3.v3图表更新为d3.v4

我很难将我的工作

chart.js

更改为

v4

。它是一个具有多个值的堆叠条形图，可响应引导容器。它在

v3

中运行良好，但我已经有了使用

d3.v4

的其他图表，因此不能同时使用

d3.v3

和

v4

代码如下：

var margins = {
  top: 12,
  left: 100,
  right: 14,
  bottom: 34
};
var legendPanel = {
  width: 100
};

var dataset = [{
 ...data...
}
];
var series = dataset.map(function (d) {
  return d.name;
});
var numberOfRecords = 0;
var dataset = dataset.map(function (d) {
  numberOfRecords = 0;
  return d.data.map(function (o, i) {
    numberOfRecords++;
    return {
      y: o.xValue,
      x: o.yValue,
      name: d.name
    };
  });
});


d3.select(window).on("resize", throttle);

var stack = d3.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,
      name:d.name
    };
  });
});

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

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

var tooltip = d3.select("body")
.append('div')
.attr('id', 'tooltip')
.attr('class', 'hidden');

var width = window.innerWidth - margins.left - margins.right - legendPanel.width;
var barHeight = 50;
var height = (numberOfRecords * 40) - margins.top - margins.bottom;

var svg, xScale, yScale, rects;

draw(width, height);

function draw(width, height) {

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

  xScale = d3.scaleLinear()
  .domain([0, xMax])
  .range([0, width]);

  yScale = d3.scaleBand()
  .domain(yValues)
  .rangeRound([0,height])
  .padding(0.1);      
  var xAxis = d3.axisBottom(xScale).tickFormat(function(d){ return d.x;});
  var yAxis = d3.axisLeft(yScale);
  var colours = d3.scaleOrdinal(d3.schemeCategory10);
  var groups = svg.selectAll('g')
  .data(dataset)
  .enter()
  .append('g')
  .style('fill', function (d, i) {
    return colours(i);
  });

  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 barHeight;
  })
  .attr('width', function (d) {
    return xScale(d.x);
  })
  .on('mouseover', function (d) {

    var xPos = parseFloat(d3.select(this).attr('x')) / 2 + width / 2;
    var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() / 2;

    d3.select('#tooltip')
    .style('left', xPos + 'px')
    .style('top', yPos + 'px')
    .style('width', '250px')
    .text(d.y+'  '+d.name+': '+d.x);

    d3.select('#tooltip').classed('hidden', false);
  })
  .on('mouseout', function () {
    d3.select('#tooltip').classed('hidden', true);
  });
}

function redraw() {
  width = window.innerWidth - margins.left - margins.right - legendPanel.width;
  d3.select('svg').remove();
  d3.select('#legend').remove();
  draw(width,height);
}

var throttleTimer;
function throttle() {
  window.clearTimeout(throttleTimer);
  throttleTimer = window.setTimeout(function() {
    redraw();
  }, 200);
}

我尝试在代码中更改不推荐使用的函数，但知道在这一部分我遇到了一个错误：

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

错误消息显示：

ERROR rect>属性x：预期长度，“NaN”和ERROR rect属性宽度：预期长度“NaN”

---

有什么想法吗？

有什么解决办法吗？我知道API改变了，它从堆栈函数返回一个数组，现在不再添加y0。但我还没有找到转换类似代码的方法。