Javascript 预览d3条形图，使其按每个x值的值排序

我用以下数据创建了一个nvd3组条形图

风险值数据=[{ 关键：小君， 价值观：[ {x:2013，y:200}， {x:2014，y:352}， {x:2015，y:1100}， {x:2016，y:120} ] }, { 关键字：七月， 价值观：[ {x:2013，y:200}， {x:2014，y:862}， {x:2015，y:124}， {x:2016，y:500} ] }, { 关键词：三月， 价值观：[ {x:2013，y:578}， {x:2014，y:964}， {x:2015，y:788}， {x:2016，y:152} ] }, { 关键字：JAN， 价值观：[ {x:2013，y:20}， {x:2014，y:485}， {x:2015，y:258}， {x:2016，y:900} ] }]; nv.addGraphfunction{ var图表=nv.models.multiBarChart； chart.xAxis.tickFormatd3.format'，f'； chart.yAxis.tickFormatd3.format'，.1f'； d3.选择“图表svg” .datumdata .过渡期 .呼叫图； nv.utils.windowResizechart.update； 收益表； }; 图表svg{ 高度：400px； }

---

您可能希望重写该类。这就是绘制条形图的地方

看起来每个月都有自己的组，并且它们被堆叠在一起。每个分组之间都有一个边距

您需要按y值对每个组进行排序，并更改x位置的水平边距

组偏移量由：xgetXd，i确定

如果可以对数据进行排序，则可以更改这些值

可以使用以下方法转换数据。这可在条形图布局函数内用于参考索引位置

function sortGroupedData(data) {
  var groups = {};
  for (var m = 0; m < data.length; m++) {
    var subset = data[m];
    for (var y = 0; y < subset.values.length; y++) {
      var point = subset.values[y],
          tuples = groups[point.x] || [];
      tuples.push([subset.key, point.y, m]);
      groups[point.x] = tuples;
    }
  }
  Object.keys(groups).forEach(function(key) {
    groups[key].sort(function(a, b) {
      return a[1] - b[1];
    });
  });
  return groups;
}

所需的代码更改 最终工作演示 免责声明：这不适用于堆叠，我会在有机会时修复它。这只解决了用户的直接问题

堆叠 在写出SVG的y位置之前，d.y1值是预先确定的。我们需要重新计算数据中每个项目的y1底部位置

if (stacked) {
  barSelection
    .attr('y', function(d, i, j) {
      var yVal = 0;
      if (!data[j].nonStackable) {
        yVal = y(d.y1); // Already determined...

---

如果不包含生成图表的代码，很难以有意义的方式回答这个问题

function sortGroupedData(data) {
  var groups = {};
  for (var m = 0; m < data.length; m++) {
    var subset = data[m];
    for (var y = 0; y < subset.values.length; y++) {
      var point = subset.values[y],
          tuples = groups[point.x] || [];
      tuples.push([subset.key, point.y, m]);
      groups[point.x] = tuples;
    }
  }
  Object.keys(groups).forEach(function(key) {
    groups[key].sort(function(a, b) {
      return a[1] - b[1];
    });
  });
  return groups;
}

{
  "2013" : [
    ["JAN", 20,  3],
    ["JUN", 200, 0],
    ["JUL", 200, 1],
    ["MAR", 578, 2]
  ],
  "2014" : [
    ["JUN", 352, 0],
    ["JAN", 485, 3],
    ["JUL", 862, 1],
    ["MAR", 964, 2]
  ],
  "2015" : [
    ["JUL", 124,  1],
    ["JAN", 258,  3],
    ["MAR", 788,  2],
    ["JUN", 1100, 0]
  ],
  "2016" : [
    ["JUN", 120, 0],
    ["MAR", 152, 2],
    ["JUL", 500, 1],
    ["JAN", 900, 3]
  ]
}

nv.models.multiBar = function() {
  // ...
  function chart(selection) {
    // ...
    selection.each(function(data) {
      var dataMap = sortGroupedData(data);
      // ...
      else {
        barSelection
          .attr('x', function(d,i) {
            var pos = dataMap[d.x].map((val, idx) => val[0] === d.key ? idx : -1).filter(x => x > -1)[0];
            return pos * x.rangeBand() / data.length;
          })
        // ...

if (stacked) {
  barSelection
    .attr('y', function(d, i, j) {
      var yVal = 0;
      if (!data[j].nonStackable) {
        yVal = y(d.y1); // Already determined...