javascript - 更新饼图的 D3 工具提示

Question

因此，我创建了一个饼图，其中包含一些 JSON 数据。单击单选按钮后，饼图的数据将根据选择的选项进行更新。但是，我遇到了一个问题，因为我想在饼图上放置一个 D3 工具提示，并在饼图更新时更新其值...有人知道最好的方法吗？

到目前为止，我的饼图如下所示:

<form>
    <label><input type="radio" name="dataset" value="females" checked> Females </label>
    <label><input type="radio" name="dataset" value="males"> Males </label>
    <label><input type="radio" name="dataset" value="totalNumber"> Both </label>
  </form>

  <script>
  var width = 760, height = 300, radius = Math.min(width, height) / 2;
  var legendRectSize = 18;
  var legendSpacing = 4;

  var color = d3.scale.ordinal()
      .domain(["7-15", "16-24", "25-33", "34-42", "43-51", "52-60", "61-70"])
      .range(["#ff8b3d", "#d65050", "#ab0e4d", "#6f0049", "#4a004b", "#d0743c", "#BE2625"]);

  var arc = d3.svg.arc()
      .outerRadius(radius * 0.9)
      .innerRadius(radius * 0.3);

  var outerArc = d3.svg.arc()
      .innerRadius(radius * 0.9)
      .outerRadius(radius * 0.9);

  var pie = d3.layout.pie()
      .sort(null)
      .value(function(d) { return d.females; });

  var svg = d3.select("#donut1").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(" + width / 4 + "," + height / 2 + ")")

  d3.json("graphdata.php", function(error, data) {

    data.forEach(function(d) {
      var path = svg.datum(data).selectAll("path")
      .data(pie)
      d.females = +d.females;
      d.males = +d.males;
      d.totalNumber = +d.totalNumber;
    });

    var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([55, 0])
      .html(function(d) {
        return ("Victims:") + " " + d[value] + "<br>";
      })

    svg.call(tip);

    var donut1 = svg.selectAll(".arc")
        .data(pie(data))
      .enter().append("g")
        .attr("class", "arc")
        .on("mouseover", tip.show)
        .on("mouseout", tip.hide);

    donut1.append("path")
        .style("fill", function(d) { return color(d.data.age); })
        .attr("d", arc)
        .each(function(d) {this._current = d; }); //stores the initial angles


  /*Control for changing the radio buttons & filtering the data*/
  d3.selectAll("input")
    .on("change", change);

    var timeout = setTimeout(function() {
      d3.select("input[value=\"females\"]").property("checked", true).each(change);}, 2000);

    function change() {
      var path = svg.datum(data).selectAll("path")
      var value = this.value;
      clearTimeout(timeout);
      pie.value(function(d) { return d[value]; }); //change value function
      tip.html(function(d) { return "Victims:" + " " + d[value]; }); //change the tooltip
      path = path.data(pie); //compute new angles
      path.transition().duration(1800).attrTween("d", arcTween); //redraw the arcs, please!
    }

    function type(d) {
      d.females = +d.females;
      d.males = +d.males;
      d.totalNumber = +d.totalNumber;
      return d;
    }

    //Store displayed angles in _current
    //Interpolate them from _current to new angles
    //_current is updated in-place by d3.interpolate during transition
    function arcTween(a) {
      var i = d3.interpolate(this._current, a);
      this._current = i(0);
      return function(t) {
        return arc(i(t));
      };
    }

我知道关键在于change()函数和这一行:

tip.html(function(d) { return "Victims:" + " " + d[value]; }); //change the tooltip

但是当我尝试在该行上使用 d[value] 时，它是未定义的。我只是不确定它还能是什么..

编辑:这是 graphdata.php 文件内容:

<?php include("connectDB.php");

$query = "SELECT sum(sex ='M') males, sum(sex ='F') females, CASE
WHEN age BETWEEN 7 AND 15 THEN '7-15'
WHEN age <= 24 THEN '16-24'
WHEN age <= 33 THEN '25-33'
WHEN age <= 42 THEN '34-42'
WHEN age <= 51 THEN '43-51'
WHEN age <= 52 THEN '52-60'
WHEN age <= 70 THEN '61-70'
END AS age,
COUNT(*) AS totalNumber

FROM people

GROUP BY CASE
WHEN age <= 15 THEN '7-15'
WHEN age <= 24 THEN '16-24'
WHEN age <= 33 THEN '25-33'
WHEN age <= 42 THEN '34-42'
WHEN age <= 51 THEN '43-51'
WHEN age <= 52 THEN '52-60'
WHEN age <= 70 THEN '61-70'
END";

$data = array(); 

if($result = mysqli_query($db,$query)) {
  while ($row = mysqli_fetch_assoc($result))
  {
    $data[] = $row;
  }
}

echo json_encode($data, JSON_PRETTY_PRINT);
?>

Answer 1

我有一个 friend 来帮助我。他最终做的是这样的:

function change() {
      var path = svg.datum(data).selectAll("path")
      var value = this.value;
      clearTimeout(timeout);

      pie.value(function(d) { return d[value]; }); //change value function

      tip.html(function(d) {
            console.log($( "input:checked" ).val() );
        if($( "input:checked" ).val() == "males") {
            hoverValue = d.data.males;
        }
        if($( "input:checked" ).val() == "females") {
            hoverValue = d.data.females;
        }
        if($( "input:checked" ).val() == "totalNumber") {
            hoverValue = d.data.totalNumber;
        }
        return "Victims:" + " " +hoverValue;
      }); //change the tooltip
      path = path.data(pie); //compute new angles
      path.transition().duration(1800).attrTween("d", arcTween); //redraw the arcs, please!
    }

特别是，发生变化的是tip.html 函数。我们获取检查的任何 radio 值输入的值，并用它来确定要显示的数据。然而，我的数据位于对象的更深处，因此我们必须像这样导航:例如，d.data.males。我们将该值设置为变量并在返回中调用它，以便它显示在工具提示中。