Question

我很难将我的工作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＆gt;属性x：预期长度，“NaN”和错误矩形属性宽度：预期长度，“NaN”。

有什么想法吗？

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

0 个答案: