问题
I would like to display additional data labels and values (other than x-axis and y-axis) on mouseover in dc.js. Below are data and the charting code.
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();
The working example can be found in below url:
https://jsfiddle.net/ah3qdecr/34/
When I mouseover on the intersection(points of x and y axis), I want the tooltip information to be displayed in label:value format for all properties (eg: Name:Damaris, Gender: Male, Id: 1). Also I would like the color of the tip to be changed (as highlighting) on mouseover. I've used title(), tooltips, d3 tip but couldn't get the desired output.
Can someone help please.
回答1:
You are going to add an event handler for your body and the circles inside your 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);
});
});
Then you will have to add the tooltip and append it to the body:
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
And last but not least here is an example for the styling of the tooltip:
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;
}
So now you've got a working tooltip, but your problem at all is the missing data inside the circle. Have you tried to enrich your points with the left data?
A working example based on your fiddle: https://jsfiddle.net/ah3qdecr/58/
来源：https://stackoverflow.com/questions/48926817/show-additional-data-properties-on-mouseover-in-dc-js