nvd3 multiBarChart中键的标题答案

【问题标题】：Title for keys in nvd3 multiBarChartnvd3 multiBarChart中键的标题
【发布时间】：2021-08-09 07:41:54
【问题描述】：

是否可以在 nvd3 多条形图中为“key”变量添加图例？

这些键出现在右上角，“进行中”和“完成”在下面的示例中。

我的意思是我想为这两个项目添加一个标题，比如“状态”。比如：

Status
o Complete   o In progress

<!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 XaxisLabel = "Project";
      var YaxisLabel = "Count";
      var Data = [
        {
          key: "Complete",
          values: [
            {
              label: "Pr1",
              value: 2
            },
            {
              label: "Pr2",
              value: 2
            },
            {
              label: "Pr3",
              value: 2
            }
          ],
          color: "blue"
        },
        {
          key: "In progress",
          values: [
            {
              label: "Pr1",
              value: 2
            },
            {
              label: "Pr2",
              value: 1
            },
            {
              label: "Pr3",
              value: 1
            }
          ],
          color: "red"
        }
      ];

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

        chart.reduceXTicks(false).staggerLabels(false);

        chart.xAxis
          .axisLabel(XaxisLabel)
          .axisLabelDistance(35);

        chart.yAxis
          .axisLabel(YaxisLabel)
          .axisLabelDistance(-5)
          .showMaxMin(false);

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

        nv.utils.windowResize(chart.update);

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

【问题讨论】：

标签： javascript nvd3.js

【解决方案1】：

在addGraph 函数中，我们可以将文本附加到图例的左侧：

d3.select('.nv-legend g')
          .append("g")
          .attr("transform", "translate(-40,5)")
          .append("text")
          .attr("dy", ".32em")
          .attr("dx", 8)
          .attr("class", "nv-legend-text")
          .attr("text-anchor", "end")
          .text("Status:");

在原始代码中：

<!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 XaxisLabel = "Project";
      var YaxisLabel = "Count";
      var Data = [
        {
          key: "Complete",
          values: [
            {
              label: "Pr1",
              value: 2
            },
            {
              label: "Pr2",
              value: 2
            },
            {
              label: "Pr3",
              value: 2
            }
          ],
          color: "blue"
        },
        {
          key: "In progress",
          values: [
            {
              label: "Pr1",
              value: 2
            },
            {
              label: "Pr2",
              value: 1
            },
            {
              label: "Pr3",
              value: 1
            }
          ],
          color: "red"
        }
      ];

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

        chart.reduceXTicks(false).staggerLabels(false);

        chart.xAxis
          .axisLabel(XaxisLabel)
          .axisLabelDistance(35);

        chart.yAxis
          .axisLabel(YaxisLabel)
          .axisLabelDistance(-5)
          .showMaxMin(false);

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

        nv.utils.windowResize(chart.update);
        
        d3.select('.nv-legend g')
          .append("g")
          .attr("transform", "translate(-40,5)")
          .append("text")
          .attr("dy", ".32em")
          .attr("dx", 8)
          .attr("class", "nv-legend-text")
          .attr("text-anchor", "end")
          .text("Status:"); 

        return chart;
      });

    </script>
  </body>
</html>

调整浏览器大小时可以正常工作。

您可以更改-40 以使其离图例更近/更远。

【讨论】：