在d3饼图中显示百分比-Java 学习之路

目前我在d3中的饼图显示了数字的总和，我想要百分比 .

例如：目前我有一个饼图，显示有多少人提交了访问我们网站的应用程序 . 我们当前的饼图显示如下：人们提交了17,000，人们没有提交10,000，但我也需要这个百分比 . 我怎么能得到那个 . 请找到下面的饼图代码，让我知道我需要做哪些更改才能完成这项工作 . 我是JavaScript和D3的新手 .

ko.bindingHandlers.pieChart = {
    init: function (element, valueAccessor) {
      var _options = valueAccessor();
      var _data = _options.transformer(_options.data);
      $(element).css("marginLeft", "auto");
      $(element).css("marginRight", "auto");
      if (typeof _options.maxWidth != "undefined") {
        var _max = _options.maxWidth * 1;
        $(element).width(Math.min($(element).parent().width(), _max));
      }

      if ($(element).find("svg").length > 0 && _data.length == 0) {
        $(element).find("svg").empty();
      }

      if (_data.length > 0 && isNaN(_data[0].value)) {
        _data = [];
        $(element).find("svg").empty();
      }

      if ($(element).is(":visible")) {
        nv.addGraph(function () {
          var _chart = nv.models.growingPieChart()
              .x(function (d) {
                return d.label
              })
              .y(function (d) {
                return d.value
              })
              .height($(element).width())
              .showLabels(true).showLegend(false)
              .tooltipContent(function (key, y, e, graph) {
                return '<h3>' + hueUtils.htmlEncode(key) + '</h3><p>' + y + '</p>'
              });

          var _d3 = ($(element).find("svg").length > 0) ? d3.select($(element).find("svg")[0]) : d3.select($(element)[0]).append("svg");

          _d3.datum(_data)
              .transition().duration(150)
              .each("end", _options.onComplete != null ? _options.onComplete : void(0))
              .call(_chart);

          if (_options.fqs) {
            $.each(_options.fqs(), function (cnt, item) {
              if (item.id() == _options.data.widget_id && item.field() == _options.field()) {
                _chart.selectSlices($.map(item.filter(), function (it) {
                  return it.value();
                }));
              }
            });
          }

          $(element).data("chart", _chart);

          var _resizeTimeout = -1;
          nv.utils.windowResize(function () {
            window.clearTimeout(_resizeTimeout);
            _resizeTimeout = window.setTimeout(function () {
              _chart.update();
            }, 200);
          });

          $(element).on("forceUpdate", function () {
            _chart.update();
          });

          $(element).height($(element).width());
          var _parentSelector = typeof _options.parentSelector != "undefined" ? _options.parentSelector : ".card-widget";
          $(element).parents(_parentSelector).on("resize", function () {
            if (typeof _options.maxWidth != "undefined") {
              var _max = _options.maxWidth * 1;
              $(element).width(Math.min($(element).parent().width(), _max));
            }
            $(element).height($(element).width());
            _chart.update();
          });

          return _chart;
        }, function () {
          var _d3 = ($(element).find("svg").length > 0) ? d3.select($(element).find("svg")[0]) : d3.select($(element)[0]).append("svg");
          _d3.selectAll(".nv-slice").on("click",
              function (d, i) {
                if (typeof _options.onClick != "undefined") {
                  chartsUpdatingState();
                  _options.onClick(d);
                }
              });
        });
      }
    },
    update: function (element, valueAccessor) {
      var _options = valueAccessor();
      var _data = _options.transformer(_options.data);
      var _chart = $(element).data("chart");
      if (_chart) {
        var _d3 = d3.select($(element).find("svg")[0]);
        _d3.datum(_data)
              .transition().duration(150)
              .each("end", _options.onComplete != null ? _options.onComplete : void(0))
              .call(_chart);

        if (_options.fqs) {
            $.each(_options.fqs(), function (cnt, item) {
              if (item.id() == _options.data.widget_id && item.field() == _options.field()) {
                _chart.selectSlices($.map(item.filter(), function (it) {
                  return it.value();
                }));
              }
            });
          }
        chartsNormalState();
      }
      else if (_data.length > 0) {
        ko.bindingHandlers.pieChart.init(element, valueAccessor);
      }
    }
  };

2 回答

0
一个小提琴对于测试这个（提示提示）很有用，但我很确定你想改变这一行：
```
.y(function (d) {
  return d.value
})
```
对此
```
.y(function (d) {
  return d.value/total
})
```
您可能必须定义总计 . 就像我说的那样，没有jsfiddle或者至少有一些数据格式的指示，很难确定这实际上是错误的还是如何解决它 .

注意：相对百分比的饼图看起来与原始数字的饼图完全相同 . 您可以更改标签，只能更改标签，如下所示：
```
return '<h3>' + hueUtils.htmlEncode(key) + '</h3><p>' + y + '</p>'
```
对此
```
return '<h3>' + hueUtils.htmlEncode(key) + '</h3><p>' + (y/total) + '</p>'
```
希望这两个都应该有效 . 如果尚未在其他地方定义，则必须定义总计 . 如果不：
```
var total = 0;
_data.forEach(function(d){total += d.value});
```
祝好运！
回复于 2024-04-26T15:26:45+08:00
0
包含诸如您正在使用的库之类的信息以及使用gist，codepen，jsfiddle等完全可重现的示例会更有帮助 . 我猜您正在使用hue，更具体地说是growingPieChart . 如果我的猜测是正确的，那么您可以修改 tooltipContent 函数，类似于我在输入时发布的@Vyross答案 .
```
.tooltipContent(function (key, y, e, graph) {
  return '<h3>' + hueUtils.htmlEncode(key) + '</h3><p>' +
    (+y) / d3.sum(
      d3.select(graph.container).select('g').datum(),
      function(d){return d.value}
    ) +
    '</p>'
});
```
回复于 2024-04-26T15:26:45+08:00

在d3饼图中显示百分比

2 回答

相关问题