javascript - 在 dc.js 中显示鼠标悬停时的其他数据属性

Question

我想在 dc.js 的鼠标悬停时显示额外的数据标签和值(x 轴和 y 轴除外)。以下是数据和图表代码。

var people = [
  {
    "id": 1,
    "name": "Damaris",
    "gender": "Female",
    "DOB": "1973-02-18",
    "MaritalStatus": "false",
    "CreditCardType": "visa-electron"
  },
  {
    "id": 2,
    "name": "Barbe",
    "gender": "Female",
    "DOB": "1969-04-10",
    "MaritalStatus": "true",
    "CreditCardType": "americanexpress"
  },
  {
    "id": 3,
    "name": "Belia",
    "gender": "Female",
    "DOB": "1960-04-16",
    "MaritalStatus": "false",
    "CreditCardType": "maestro"
  },
  {
    "id": 4,
    "name": "Leoline",
    "gender": "Female",
    "DOB": "1995-01-19",
    "MaritalStatus": "true",
    "CreditCardType": "bankcard"
  },
  {
    "id": 5,
    "name": "Valentine",
    "gender": "Female",
    "DOB": "1992-04-16",
    "MaritalStatus": "false",
    "CreditCardType": ""
  },
  {
    "id": 6,
    "name": "Rosanne",
    "gender": "Female",
    "DOB": "1985-01-05",
    "MaritalStatus": "true",
    "CreditCardType": "bankcard"
  },
  {
    "id": 7,
    "name": "Shalna",
    "gender": "Female",
    "DOB": "1956-11-01",
    "MaritalStatus": "false",
    "CreditCardType": "jcb"
  },
  {
    "id": 8,
    "name": "Mordy",
    "gender": "Male",
    "DOB": "1990-03-27",
    "MaritalStatus": "true",
    "CreditCardType": "china-unionpay"
  },
  {
    "id": 9,
    "name": "Tristan",
    "gender": "Male",
    "DOB": "1998-10-05",
    "MaritalStatus": "true",
    "CreditCardType": ""
  },
  {
    "id": 10,
    "name": "Alphonso",
    "gender": "Male",
    "DOB": "1992-08-10",
    "MaritalStatus": "false",
    "CreditCardType": "mastercard"
  },
  {
    "id": 11,
    "name": "Hirsch",
    "gender": "Male",
    "DOB": "1973-02-13",
    "MaritalStatus": "false",
    "CreditCardType": ""
  },
  {
    "id": 12,
    "name": "Kirstyn",
    "gender": "Female",
    "DOB": "1989-06-28",
    "MaritalStatus": "false",
    "CreditCardType": "bankcard"
  },
  {
    "id": 13,
    "name": "Benson",
    "gender": "Male",
    "DOB": "1959-10-19",
    "MaritalStatus": "true",
    "CreditCardType": "switch"
  },
  {
    "id": 14,
    "name": "Florry",
    "gender": "Female",
    "DOB": "1993-11-11",
    "MaritalStatus": "true",
    "CreditCardType": "diners-club-international"
  },
  {
    "id": 15,
    "name": "Jenine",
    "gender": "Female",
    "DOB": "1957-02-16",
    "MaritalStatus": "false",
    "CreditCardType": "diners-club-enroute"
  },
  {
    "id": 16,
    "name": "Hortense",
    "gender": "Female",
    "DOB": "1993-12-17",
    "MaritalStatus": "false",
    "CreditCardType": "jcb"
  },
  {
    "id": 17,
    "name": "Zulema",
    "gender": "Female",
    "DOB": "1990-09-27",
    "MaritalStatus": "false",
    "CreditCardType": "jcb"
  },
  {
    "id": 18,
    "name": "Leoline",
    "gender": "Female",
    "DOB": "1990-02-02",
    "MaritalStatus": "false",
    "CreditCardType": "visa-electron"
  },
  {
    "id": 19,
    "name": "Bayard",
    "gender": "Male",
    "DOB": "1997-01-11",
    "MaritalStatus": "false",
    "CreditCardType": "jcb"
  },
  {
    "id": 20,
    "name": "Joanne",
    "gender": "Female",
    "DOB": "1996-02-01",
    "MaritalStatus": "false",
    "CreditCardType": "maestro"
  },
  {
    "id": 21,
    "name": "Marlee",
    "gender": "Female",
    "DOB": "1994-11-28",
    "MaritalStatus": "false",
    "CreditCardType": ""
  },
  {
    "id": 22,
    "name": "Mitchell",
    "gender": "Male",
    "DOB": "1993-03-09",
    "MaritalStatus": "false",
    "CreditCardType": "maestro"
  },
  {
    "id": 23,
    "name": "Jefferey",
    "gender": "Male",
    "DOB": "1999-09-19",
    "MaritalStatus": "false",
    "CreditCardType": "jcb"
  },
  {
    "id": 24,
    "name": "Jolee",
    "gender": "Female",
    "DOB": "1951-04-14",
    "MaritalStatus": "false",
    "CreditCardType": "jcb"
  },
  {
    "id": 25,
    "name": "Selma",
    "gender": "Female",
    "DOB": "1958-08-14",
    "MaritalStatus": "false",
    "CreditCardType": "mastercard"
  },
  {
    "id": 26,
    "name": "Pavlov",
    "gender": "Male",
    "DOB": "1971-12-24",
    "MaritalStatus": "true",
    "CreditCardType": "jcb"
  },
  {
    "id": 27,
    "name": "Willi",
    "gender": "Male",
    "DOB": "1999-09-29",
    "MaritalStatus": "false",
    "CreditCardType": "diners-club-enroute"
  },
  {
    "id": 28,
    "name": "Vi",
    "gender": "Female",
    "DOB": "1988-09-25",
    "MaritalStatus": "false",
    "CreditCardType": "laser"
  },
  {
    "id": 29,
    "name": "Teodoro",
    "gender": "Male",
    "DOB": "1969-03-02",
    "MaritalStatus": "false",
    "CreditCardType": "jcb"
  },
  {
    "id": 30,
    "name": "Loralyn",
    "gender": "Female",
    "DOB": "1953-11-27",
    "MaritalStatus": "false",
    "CreditCardType": ""
  }
]

var chart = dc.lineChart('#line');


          var mycrossfilter = crossfilter(people);

            var ageDimension = mycrossfilter.dimension(function(data) { 
               return [~~((Date.now() - new Date(data.DOB)) / (31557600000))] 
            });
            var ageGroup = ageDimension.group().reduceCount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup) ;                           
            chart.render();

可以在下面的 url 中找到工作示例:

https://jsfiddle.net/ah3qdecr/34/

当我将鼠标悬停在交叉点(x 和 y 轴的点)上时，我希望工具提示信息以标签:所有属性的值格式显示(例如:姓名:Damaris，性别:男性，ID:1)。此外，我希望在鼠标悬停时更改提示的颜色(如突出显示)。我使用了 title()、工具提示、d3 提示，但无法获得所需的输出。

有人可以帮忙吗

Answer 1

您将为 body 和 svg Canvas 内的圆圈添加事件处理程序:

d3.select('body').on('mouseover', function() {
  d3.selectAll('circle.dot')
    .on("mouseover", function(d) {
    div.transition()
      .duration(200)
      .style("opacity", .9);
    div.html(d) // Here is the output of the data
      .style("left", (d3.event.pageX) + "px")
      .style("top", (d3.event.pageY - 28) + "px");
  })
    .on("mouseout", function(d) {
    div.transition()
      .duration(500)
      .style("opacity", 0);
  });
});

然后您必须添加工具提示并将其附加到正文中:

var div = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

最后但并非最不重要的是工具提示样式的示例:

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: rebecca;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

现在您有了一个有效的工具提示，但您的问题根本在于圆圈内缺少数据。你试过用剩下的数据来丰富你的观点吗？

基于您的 fiddle 的工作示例:https://jsfiddle.net/ah3qdecr/58/