Question

我的图表需要具有3的倍数的刻度值。例如，如果我有5个数据点，则我的x轴应显示为（3、6、9、12、15）。如何获取nvd3以显示所有刻度号？我在下面粘贴了我的代码以供参考

var chart = nv.models.lineChart()
.options({
  margin: {left: 100, bottom: 100},
  x: function(d,i) { return i*3},
  showXAxis: true,
  showYAxis: true,
  showLegend: true,
  reduceXTicks: false,
  showMaxMin: false,
  //values: $scope.data.values.map( function(d,i) { return i*3; }),
  useInteractiveGuideline: true,
  transitionDuration: 2500,
  showControls : true
})
;


chart.xAxis     //Chart x-axis settings
  .axisLabel('Ager')
  .orient('bottom')
  //.tickValues( function(d,i) { return i*3;})
  .tickFormat(d3.format(',r'));

chart.yAxis     //Chart y-axis settings
  .axisLabel('Voltage (v)')
  .tickFormat(d3.format('.02f'));     nv.utils.windowResize(chart.update);

我已经尝试了所有可以想到的内容，并在线阅读以获取nvd3以3的倍数显示所有刻度线。请帮我摆脱这种棘手的情况。

谢谢！

Answer 1

您可能已经阅读了d3文档，并发现.tickValues不接受函数。

根据x轴的域构造刻度值数组。因为尚未设置域，所以您必须根据数据自己构建它。

使用nvd3网站上的SinCos示例

var myData = sinAndCos();
var xExtent = d3.extent(myData[0].values, d=>d.x);
xExtent = [Math.floor(xExtent[0]), Math.ceil(xExtent[1])+1];
var xTicks = d3.range(xExtent[0], xExtent[1]).filter(n => n%3===0);

chart.xAxis
    .axisLabel('Time (ms)')
    .tickValues(xTicks)
    .tickFormat(d3.format(',r'));

完整示例。它不会直接从浏览器运行（不会在iframe（??）内加载nvd3）。将其复制到本地文件并从那里运行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://nvd3.org/assets/css/nv.d3.css" rel="stylesheet"/>
<script src="https://nvd3.org/assets/lib/d3.v3.js"></script>
<script src="https://nvd3.org/assets/js/nv.d3.js"></script>
</head>
<body>
<div id="chart">
<svg style="width:800px;height:500px;"></svg>
</div>
<script>
/*These lines are all chart setup.  Pick and choose which chart features you want to utilize. */
nv.addGraph(function() {
  var chart = nv.models.lineChart()
                .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
                .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                .transitionDuration(350)  //how fast do you want the lines to transition?
                .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                .showYAxis(true)        //Show the y-axis
                .showXAxis(true)        //Show the x-axis
  ;
  var myData = sinAndCos();
  var xExtent = d3.extent(myData[0].values, d=>d.x);
  xExtent = [Math.floor(xExtent[0]), Math.ceil(xExtent[1])+1];
  var xTicks = d3.range(xExtent[0], xExtent[1]).filter(n => n%3===0);

  chart.xAxis     //Chart x-axis settings
      .axisLabel('Time (ms)')
      .tickValues(xTicks)
      .tickFormat(d3.format(',r'));

  chart.yAxis     //Chart y-axis settings
      .axisLabel('Voltage (v)')
      .tickFormat(d3.format('.02f'));

  d3.select('#chart svg')    //Select the <svg> element you want to render the chart in.   
      .datum(myData)         //Populate the <svg> element with chart data...
      .call(chart);          //Finally, render the chart!

  //Update the chart when window resizes.
  nv.utils.windowResize(function() { chart.update() });
  return chart;
});
/**************************************
 * Simple test data generator
 */
function sinAndCos() {
  var sin = [],sin2 = [],
      cos = [];

  //Data is represented as an array of {x,y} pairs.
  for (var i = 0; i < 100; i++) {
    sin.push({x: i, y: Math.sin(i/10)});
    sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
    cos.push({x: i, y: .5 * Math.cos(i/10)});
  }

  //Line chart data should be sent as an array of series objects.
  return [
    {
      values: sin,      //values - represents the array of {x,y} data points
      key: 'Sine Wave', //key  - the name of the series.
      color: '#ff7f0e'  //color - optional: choose your own line color.
    },
    {
      values: cos,
      key: 'Cosine Wave',
      color: '#2ca02c'
    },
    {
      values: sin2,
      key: 'Another sine wave',
      color: '#7777ff',
      area: true      //area - set to true if you want this line to turn into a filled area chart.
    }
  ];
}

</script>
</body>
</html>

NVD3-显示所有刻度值

1 个答案: