我想在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();
可以在下面的网址中找到工作示例：
https://jsfiddle.net/ah3qdecr/34/
当鼠标悬停在交叉点（x和y轴的点）时，我希望工具提示信息以label：value格式显示所有属性（例如：名称：Damaris，性别：男性，Id：1）。此外，我希望在鼠标悬停时更改提示的颜色（突出显示）。 我使用过title（），工具提示，d3提示但无法获得所需的输出。
有人可以帮忙吗。
答案 0 :(得分：1)
您将为您的身体和svg画布中的圆圈添加一个事件处理程序：
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;
}
所以现在你已经有了一个工作工具提示，但你的问题根本就是圈内缺少的数据。您是否尝试使用左侧数据来丰富您的积分？
基于小提琴的工作示例：https://jsfiddle.net/ah3qdecr/58/