Question

＆＃13;

<!DOCTYPE html>
<html>

<head>

  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Testing Donut first</title>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <style type="text/css">
    #first {
      height: 80%;
      width: 30%;
      border: 3px solid #73AD21 !important;
      position: absolute !important;
    }
    .slice path {
      stroke: #fff;
      stroke-width: 1px;
    }
    .textTop {
      font-family: 'Times';
      font-weight: bold;
      font-size: 15pt;
      fill: #2c3218;
    }
    .textBottom {
      fill: #444;
      font-family: 'Times';
      font-weight: bold;
      font-size: 20pt;
    }
    .top {
      border: 1px solid #bbb;
      color: #777;
      font-family: 'Segoe UI';
      text-decoration: none;
    }
    .top:hover {
      border: 1px solid #555;
      color: #333;
    }
    .tooltip {
      background: #eee;
      box-shadow: 0 0 5px #999999;
      color: #080808;
      line-height: 16px;
      border: 1px solid #d4d4d4;
      display: inline-block;
      font-size: 12px;
      /*padding: 10px;*/
      position: absolute;
      text-align: center;
      width: auto;
      height: auto;
      z-index: 10;
      opacity: 0.8;
    }
  </style>
</head>

<body>
  <div id="first" viewBox="0 0 960 500" perserveAspectRatio="xMinYMid meet"></div>
  <script type="text/javascript">
    function resize() {

      var w = document.getElementById('first').clientWidth;
      // alert(w);
      var h = document.getElementById('first').clientHeight;
      // alert(h);
      var r = Math.min(w, h) / 2;
      // alert(r);

      var first = $("#first"),
        aspect = first.width() / first.height(),
        first = first.parent();

      $(window).on("resize", function() {
        var targetWidth = first.width();
        first.attr("width", targetWidth);
        first.attr("height", Math.round(targetWidth / aspect));
      }).trigger("resize");

      return {
        w: w,
        h: h,
        r: r
      };

    }

    function first() {

      var w = resize().w,
        h = resize().h,
        r = resize().r;
      var inner = 0;
      var color = d3.scale.category20();

      var data = [
        ["192.168.12.1", 20],
        ["76.09.45.34", 40],
        ["34.91.23.76", 80],
        ["192.168.19.32", 16],
        ["192.168.10.89", 50],
        ["192.178.34.07", 18],
        ["192.168.12.98", 30]
      ];

      var data = data.map(function(d) {
        return {
          IP: d[0],
          count: d[1]
        };
      });

      var total = d3.sum(data, function(d) {
        return d3.sum(d3.values(d));
      });

      var svg = d3.select("#first")
        .data([data])
        .append("svg")
        .classed("svg-content", true)
        .attr("width", '100%')
        .attr("height", '100%')
        .attr("viewBox", "0 0 960 500")
        .attr("preserveAspectRatio", "xMinYMax meet")
        .append("svg:g")
        .attr("transform", "translate(" + w / 2 + ", " + h + ")");

      var tooltip = d3.select('#first')
        .append('div')
        .attr('class', 'tooltip');

      tooltip.append('div')
        .attr('class', 'label');

      tooltip.append('div')
        .attr('class', 'count');

      tooltip.append('div')
        .attr('class', 'percent');

      var arc = d3.svg.arc()
        .innerRadius(inner)
        .outerRadius(r + 20);

      var arcOver = d3.svg.arc()
        .innerRadius(inner)
        .outerRadius(r + 25);

      var pie = d3.layout.pie()
        .sort(null)
        .startAngle(1.1 * Math.PI)
        .endAngle(3.1 * Math.PI)
        .value(function(d) {
          return d.count;
        });

      var arcs = svg.selectAll("g.slice")
        .data(pie)
        .enter()
        .append("svg:g")
        .attr("class", "slice")
        .on("mouseover", function(d) {
          d3.select(this).select("path").transition()
            .duration(200)
            .attr("d", arcOver)
            .style('opacity', 0.7)
          var total = d3.sum(data.map(function(d) {
            return d.count;
          }));
          var percent = Math.round(1000 * d.data.count / total) / 10;
          tooltip.select('.label').html(d.data.IP);
          tooltip.select('.count').html(d.data.count);
          tooltip.select('.percent').html(percent + '%');
          tooltip.style('display', 'block');
        })

      .on('mousemove', function(d) {
        tooltip.style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY) + "px");
      })

      .on("mouseout", function(d) {
        d3.select(this).select("path").transition()
          .duration(100)
          .attr("d", arc)
          .style('opacity', 1);
        tooltip.style('display', 'none');
      });

      arcs.append("svg:path")
        .attr("fill", function(d, i) {
          return color(i);
        })
        .attr("d", arc)
        .transition()
        .ease("exp")
        .duration(1000)
        .attrTween("d", tweenPie);

      function tweenPie(b) {
        var i = d3.interpolate({
          startAngle: 1.1 * Math.PI,
          endAngle: 1.1 * Math.PI
        }, b);
        return function(t) {
          return arc(i(t));
        };
      }

      var legend = svg.append("svg:g")
        .attr("transform", "translate(" + w + ", -" + h / 2 + ")")
        .attr("class", "legend")
        .selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("transform", function(d, i) {
          return "translate(0," + i * 25 + ")";
        });

      legend.append("rect")
        .attr("width", 20)
        .attr("height", 20)
        .style("fill", function(d, i) {
          return color(i);
        });

      legend.append("text")
        .attr("x", 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("font-size", "20pt")
        .style("font-family", "Times")
        .text(function(d) {
          return d.IP;
        });
    }
  </script>

  <script type="text/javascript">
    first();
  </script>

</body>

</html>

＆＃13;

您好，我正在使用d3.js制作一个饼图并将其表示在div中，名为＆＃34; first＆＃34;。饼图也会生成并显示。但唯一的问题是svg：g元素有.attr（＆＃34;转换＆＃34;，＆＃34;翻译（＆＃34;＆＃34;）。饼图从一个点浮动到另一个点一旦div调整大小，div内部.g元素有时会飞出div，使得图例和饼图不可见。如果不考虑div大小，如何使g元素始终位于div的中心？我试过了通过提供50％和所有但不工作的每种可能的方式。我甚至尝试过显示：阻止但是位置仍然不固定。请帮我根据div大小自动化div中的g元素坐标，以便始终显示在svg / div的中心。请帮我。我被卡住了。感谢您提前提供任何帮助。

Answer 1

变化：

<div id="first" viewBox="0 0 960 500" perserveAspectRatio="xMinYMid meet"></div>

要：

 <div id="first" style="width:960px;height:500px"></div>

无法在div

1 个答案: