如何定位的所有其他地区/条形图上述NVD3线图？ [英] How to position NVD3 line graph above all other area / bar graphs?

问题描述

的Plunker例如

在上面的例子中可以看到，该行橙色区域图形渲染下：

在这里阅读这篇趋势，那么我想这 d3.select（'＃SVG图表.lines1Wrap'）moveToFront（）; ，但得到了错误 moveToFront 不是一个函数

图code

  VAR数据= [{
  钥匙：价格，
  类型：行
  Y轴：2，
  价值观：
    [1443621600000，71.89]
    [1443619800000，75.51]
    [14436.18亿，12.49]
    [1443616200000，20.72]
    [1443612600000，70.39]
    [1443610800000，59.77]
  ]
}，{
  钥匙：数量1
  类型：区，
  Y轴：1，
  价值观：
    [1136005200000，1]
    [1138683600000，5]，
    [1141102800000，10]
    [1143781200000，0]，
    [1146369600000，1]
    [11490.48亿，0]，
  ]
}];数据= Data.Map中（功能（系列）{
  series.values​​ = series.values​​.map（功能（D）{
    返回{
      X：D [0]，
      Y：D [1]
    }
  }）;
  返回系列;
}）;nv.addGraph（函数（）{
  VAR图= nv.models.multiChart（）
    .margin（{
      顶部：20，
      右：40，
      底：50，
      左：40
    }）
    .yDomain1（[0，10]）
    .yDomain2（[0,100]）//硬$ C $光盘：其中;
    .interpolate（线性）//不平滑的线条
    。颜色（d3.scale.category10（）范围（））;  chart.xAxis.tickFormat（函数（D）{
    返回d3.time.format（％I：％M'）（新日期（d）条）;
  }）;
  chart.yAxis1.tickFormat（d3.format（'F'））;
  chart.yAxis2.tickFormat（函数（D）{
    返回'$'+ d3.format（'F'）（D）
  }）;  d3.select（'＃SVG图）
    .datum（数据）
    。.transition（）持续时间（500）.CALL（图）  d3.selection.prototype.moveToFront =功能（）{
      返回this.each（函数（）{
          this.parentNode.appendChild（本）;
      }）;
  };  d3.select（'＃SVG图表.lines1Wrap'）moveToFront（）。  chart.update（）;
  nv.utils.windowResize（chart.update）;
  返回图;
}）;
 

---

更新
href=\"http://stackoverflow.com/a/14426477/168738\">这个答案，尝试使用该解决方案：

  d3.selection.prototype.moveToFront =功能（）{
    返回this.each（函数（）{
        this.parentNode.appendChild（本）;
    }）;
};d3.selection.prototype.moveToBack =功能（）{
    返回this.each（函数（）{
        VAR则firstChild = this.parentNode.firstChild;
        如果（则firstChild）{
            this.parentNode.insertBefore（这一点，则firstChild）;
        }
    }）;
};d3.select（'＃SVG图表.lines1Wrap'）moveToFront（）。
d3.select（'＃SVG图表.NV-areaWrap'）moveToBack（）。
 

没有更多的错误，但蓝线图仍不能在所有的别人面前感动。

解决方案

添加这行（区域图）后移至您的线路（线路图）DOM元素DOM元素。

  d3.select（'。lines2Wrap'）。节点（）。parentNode.insertBefore（d3.select（'。stack1Wrap'）。节点（），d3.select（'。 lines2Wrap'）节点（））。
 

全部工作code rel=\"nofollow\">

锄头这有助于！ ：）

The Plunker example

In the example above you can see that the line is rendered under the orange area graph:

Was reading this trend here, then I tried this d3.select('svg#chart .lines1Wrap').moveToFront();, but got the error moveToFront is not a function.

Chart code

var data = [{
  "key": "Price",
  "type": "line",
  "yAxis": 2,
  "values": [
    [1443621600000, 71.89],
    [1443619800000, 75.51],
    [1443618000000, 12.49],
    [1443616200000, 20.72],
    [1443612600000, 70.39],
    [1443610800000, 59.77],
  ]
}, {
  "key": "Quantity1",
  "type": "area",
  "yAxis": 1,
  "values": [
    [1136005200000, 1],
    [1138683600000, 5],
    [1141102800000, 10],
    [1143781200000, 0],
    [1146369600000, 1],
    [1149048000000, 0],
  ]
}];

data = data.map(function(series) {
  series.values = series.values.map(function(d) {
    return {
      x: d[0],
      y: d[1]
    }
  });
  return series;
});

nv.addGraph(function() {
  var chart = nv.models.multiChart()
    .margin({
      top: 20,
      right: 40,
      bottom: 50,
      left: 40
    })
    .yDomain1([0, 10])
    .yDomain2([0, 100]) // hard-coded :<
    .interpolate("linear") // don't smooth out the lines
    .color(d3.scale.category10().range());

  chart.xAxis.tickFormat(function(d) {
    return d3.time.format('%I:%M')(new Date(d));
  });
  chart.yAxis1.tickFormat(d3.format(',f'));
  chart.yAxis2.tickFormat(function(d) {
    return '$' + d3.format(',f')(d)
  });

  d3.select('svg#chart')
    .datum(data)
    .transition().duration(500).call(chart);

  d3.selection.prototype.moveToFront = function() {
      return this.each(function() {
          this.parentNode.appendChild(this);
      });
  };

  d3.select('svg#chart .lines1Wrap').moveToFront();

  chart.update();
  nv.utils.windowResize(chart.update);
  return chart;
});

---

UPDATE Found this answer here, tried to use the solution:

d3.selection.prototype.moveToFront = function() {
    return this.each(function() {
        this.parentNode.appendChild(this);
    });
};

d3.selection.prototype.moveToBack = function() { 
    return this.each(function() { 
        var firstChild = this.parentNode.firstChild; 
        if (firstChild) { 
            this.parentNode.insertBefore(this, firstChild); 
        } 
    }); 
};

d3.select('svg#chart .lines1Wrap').moveToFront();
d3.select('svg#chart .nv-areaWrap').moveToBack();

No more error, however the blue line graph still is not moved in front of all the others.

解决方案

Add this to move your line(line chart) DOM element after the line(Area Chart) DOM element.

d3.select('.lines2Wrap').node().parentNode.insertBefore(d3.select('.stack1Wrap').node(), d3.select('.lines2Wrap').node());

Full working code here

Hoe this helps! :)

这篇关于如何定位的所有其他地区/条形图上述NVD3线图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！