Question

我正在尝试在条形图上的x轴上显示标签，如下所示，但它只显示其他每一个。有谁知道如何显示所有？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
    </head>
    <body>
        
    

<h2>multiBarChart</h2>

<div id="multibarchart"><svg style="height:350px;width:800px;"></svg></div>
    <script>
  data_multibarchart = [{
    "values": [{
      "y": 4,
      "x": 'a'
    }, {
      "y": 9,
      "x": 'b'
    }, {
      "y": 9,
      "x": 'c'
    }, {
      "y": 5,
      "x": 'd'
    }, {
      "y": 6,
      "x": 'e'
    }, {
      "y": 4,
      "x": 'f'
    }, {
      "y": 1,
      "x": 'g'
    }, {
      "y": 7,
      "x": 'h'
    }, {
      "y": 6,
      "x": 'i'
    }, {
      "y": 2,
      "x": 'j'
    }],
    "key": "Count",
    "yAxis": "1"
  }, {
    "values": [{
      "y": 8,
      "x": 'a'
    }, {
      "y": 18,
      "x": 'b'
    }, {
      "y": 18,
      "x": 'c'
    }, {
      "y": 10,
      "x": 'd'
    }, {
      "y": 12,
      "x": 'e'
    }, {
      "y": 8,
      "x": 'f'
    }, {
      "y": 2,
      "x": 'g'
    }, {
      "y": 14,
      "x": 'h'
    }, {
      "y": 12,
      "x": 'i'
    }, {
      "y": 4,
      "x": 'j'
    }],
    "key": "Duration",
    "yAxis": "1"
  }];
  nv.addGraph(function() {
    var chart = nv.models.multiBarChart();
    chart.margin({
      top: 30,
      right: 60,
      bottom: 70,
      left: 60
    });
    var datum = data_multibarchart;
    chart.yAxis.tickFormat(d3.format(',.2f'));

    chart.tooltipContent(function(key, y, e, graph) {
      var x = String(graph.point.x);
      var y = String(graph.point.y);
      if (key == 'Count') {
        var y = String(graph.point.y) + ' call';
      }
      if (key == 'Duration') {
        var y = String(graph.point.y) + ' min';
      }
      tooltip_str = '<center><b>' + key + '</b></center>' + y + ' at ' + x;
      return tooltip_str;
    });
    chart.showLegend(true);
    d3.select('#multibarchart svg').datum(datum).transition().duration(500).attr('height', 350).call(chart);
  });
    </script>

    </body>
</html>

Answer 1

我发现了。我只是让它们可见：

d3.selectAll('#multibarchart svg .tick text').style("opacity", 1);

请注意，我也尝试过设置：

chart.reduceXTicks  = false;
chart.staggerLabels = false;
chart.wrapLabels = false;

但这确实不帮助。

使用Nvd3显示带有多条形图的自定义x轴标签

1 个答案: