nvd3.js multiBarHorizontalChart 上没有轴刻度

Question

这是一个 nvd3.js 水平多条形图。 x 轴没有刻度（在 0 到 44.6 之间）。我如何获得一些 x 轴刻度？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.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.6/nv.d3.min.js"></script>

    <style>
      text {
        font: 12px sans-serif;
      }
      svg {
        display: block;
      }
      html,
      body,
      #chart1,
      svg {
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="chart1">
      <svg></svg>
    </div>

    <script>
      var selector = "#chart1 svg";
      var Data = [
        {
          key: "Low",
          values: [
            { label: "A", value: 44.5555555555556 },
            { label: "B", value: 28.2222222222222 }
          ],
          color: "#30123BFF"
        },
        {
          key: "Medium",
          values: [
            { label: "A", value: 24 },
            { label: "B", value: 28.7777777777778 }
          ],
          color: "#A2FC3CFF"
        },
        {
          key: "High",
          values: [
            { label: "A", value: 24.5555555555556 },
            { label: "B", value: 18.7777777777778 }
          ],
          color: "#7A0403FF"
        }
      ];

      nv.addGraph(function () {
        var chart = nv.models
          .multiBarHorizontalChart()
          .x(function (d) {
            return d.label;
          })
          .y(function (d) {
            return d.value;
          })
          .duration(1300)
          .margin({ bottom: 100, left: 100 })
          .groupSpacing(0.1);

        chart.xAxis
          .axisLabel("wool")
          .axisLabelDistance(-5);

        chart.yAxis.axisLabel("breaks average")
          .axisLabelDistance(5)
          .showMaxMin(true);

        d3.select(selector).datum(Data).call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
      });
    </script>
  </body>
</html>

Answer 1

只需将 .ticks(x) 添加到您的 chart.yAxis 函数中，即 x 您想要的分时数。

对于当前提供的示例，假设您希望添加 10 个报价，您可以使用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.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.6/nv.d3.min.js"></script>

    <style>
      text {
        font: 12px sans-serif;
      }
      svg {
        display: block;
      }
      html,
      body,
      #chart1,
      svg {
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="chart1">
      <svg></svg>
    </div>

    <script>
      var selector = "#chart1 svg";
      var Data = [
        {
          key: "Low",
          values: [
            { label: "A", value: 44.5555555555556 },
            { label: "B", value: 28.2222222222222 }
          ],
          color: "#30123BFF"
        },
        {
          key: "Medium",
          values: [
            { label: "A", value: 24 },
            { label: "B", value: 28.7777777777778 }
          ],
          color: "#A2FC3CFF"
        },
        {
          key: "High",
          values: [
            { label: "A", value: 24.5555555555556 },
            { label: "B", value: 18.7777777777778 }
          ],
          color: "#7A0403FF"
        }
      ];

      nv.addGraph(function () {
        var chart = nv.models
          .multiBarHorizontalChart()
          .x(function (d) {
            return d.label;
          })
          .y(function (d) {
            return d.value;
          })
          .duration(1300)
          .margin({ bottom: 100, left: 100 })
          .groupSpacing(0.1);
        chart.xAxis
          .axisLabel("wool")
          .axisLabelDistance(-5);

        chart.yAxis.axisLabel("breaks average")
          .axisLabelDistance(5)
          .ticks(10)
          .showMaxMin(true);

        d3.select(selector).datum(Data).call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
      });
    </script>
  </body>
</html>

更多信息请查看：https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axis_ticks

nvd3.js multiBarHorizontalChart 上没有轴刻度

No axis ticks on nvd3.js multiBarHorizontalChart

javascript

nvd3.js

nvd3.js multiBarHorizo​​ntalChart 上没有轴刻度

No axis ticks on nvd3.js multiBarHorizontalChart

javascript

nvd3.js

nvd3.js multiBarHorizontalChart 上没有轴刻度