更改NVD3中焦点图的背景颜色

拉斐尔·桑帕约

有谁知道是否可以在NVD3中修改lineWithFocusChart焦点栏的背景?

在此处输入图片说明

安德鲁·里德(Andrew Reid)

由于NVD3建立在d3上,因此可以使用d3功能选择组成焦点栏背景的矩形并更改其样式。由于NVD3具有零件的标准化类,因此应如下所示:

d3.selectAll(".nv-brushBackground").selectAll("rect") // select the rectangles in the background group(s)
  .style("fill","steelblue") // style as desired
  .style("opacity",0.8);

例

nv.addGraph(function() {
 var chart = nv.models.lineWithFocusChart();
   chart.brushExtent([50,70]);
   chart.xAxis.tickFormat(d3.format(',f')).axisLabel("Stream - 3,128,.1");
   chart.x2Axis.tickFormat(d3.format(',f'));
   chart.yTickFormat(d3.format(',.2f'));
   chart.useInteractiveGuideline(true);
   d3.select('#chart svg')
     .datum(testData())
     .call(chart);
   nv.utils.windowResize(chart.update);
		
	 d3.selectAll(".nv-brushBackground").selectAll("rect")
		 .style("fill","steelblue")
		 .style("opacity",0.8);
   
   return chart;
 });
   
 function testData() {
   return stream_layers(3,128,.1).map(function(data, i) {
     return {
       key: 'Stream' + i,
       area: i === 1,
       values: data
     };
  });
}
	
	
/// stream_layers.js:

/* Inspired by Lee Byron's test data generator. */
function stream_layers(n, m, o) {
  if (arguments.length < 3) o = 0;
  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < m; i++) {
      var w = (i / m - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }
  return d3.range(n).map(function() {
      var a = [], i;
      for (i = 0; i < m; i++) a[i] = o + o * Math.random();
      for (i = 0; i < 5; i++) bump(a);
      return a.map(stream_index);
    });
}

/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
  return d3.range(n).map(function(i) {
    return d3.range(m).map(function(j) {
        var x = 20 * j / m - i / 3;
        return 2 * x * Math.exp(-.5 * x);
      }).map(stream_index);
    });
}

function stream_index(d, i) {
  return {x: i, y: Math.max(0, d)};
}
text {
  font: 12px sans-serif;
}
svg {
  display: block;
}
html, body, #chart, svg {
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js"></script>

<div id="chart" class='with-3d-shadow with-transitions'>
    <svg></svg>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章