鼠标悬停或 onclick 事件在 dc.js 中的散点图上不起作用
Mouseover or onclick event not working on scatterPlot in dc.js
我正在使用基于 d3.js 5.9.2 的 dc.js 库 3.0.12 来绘制散点图。
散点图已经按照我的预期生成了。我的下一步是向点添加一些鼠标悬停或单击事件，以帮助用户从我的数据中获取更多信息。
我已经从这两个问题中参考并改编了一些代码：
dc.js onClick Listener Not Working
show additional data properties on mouseover in dc.js
通过检查散点图上的元素，在我看来，可以通过访问 "path.symbol"
来达到图上的散点
因为很难从我自己的页面中分离出数据，所以我生成了一些用于绘图的假数据，以下是我尝试过的代码（使用两种不同的方法）：
var people = [{
"id": 1,
"name": "Damaris",
"gender": "Female",
"DOB": "1973-02-18",
"MaritalStatus": "false",
"CreditCardType": "visa-electron",
"y":12
},
{
"id": 2,
"name": "Barbe",
"gender": "Female",
"DOB": "1969-04-10",
"MaritalStatus": "true",
"CreditCardType": "americanexpress",
"y":14
},
{
"id": 3,
"name": "Belia",
"gender": "Female",
"DOB": "1960-04-16",
"MaritalStatus": "false",
"CreditCardType": "maestro",
"y":8
},
{
"id": 4,
"name": "Leoline",
"gender": "Female",
"DOB": "1995-01-19",
"MaritalStatus": "true",
"CreditCardType": "bankcard",
"y":20
},
{
"id": 5,
"name": "Valentine",
"gender": "Female",
"DOB": "1992-04-16",
"MaritalStatus": "false",
"CreditCardType": "",
"y":16
},
{
"id": 6,
"name": "Rosanne",
"gender": "Female",
"DOB": "1985-01-05",
"MaritalStatus": "true",
"CreditCardType": "bankcard",
"y":22
},
{
"id": 7,
"name": "Shalna",
"gender": "Female",
"DOB": "1956-11-01",
"MaritalStatus": "false",
"CreditCardType": "jcb",
"y":15
},
{
"id": 8,
"name": "Mordy",
"gender": "Male",
"DOB": "1990-03-27",
"MaritalStatus": "true",
"CreditCardType": "china-unionpay",
"y":6
},
{
"id": 9,
"name": "Tristan",
"gender": "Male",
"DOB": "1998-10-05",
"MaritalStatus": "true",
"CreditCardType": "",
"y":21
},
{
"id": 10,
"name": "Alphonso",
"gender": "Male",
"DOB": "1992-08-10",
"MaritalStatus": "false",
"CreditCardType": "mastercard",
"y":12
},
{
"id": 11,
"name": "Hirsch",
"gender": "Male",
"DOB": "1973-02-13",
"MaritalStatus": "false",
"CreditCardType": "",
"y":6
},
{
"id": 12,
"name": "Kirstyn",
"gender": "Female",
"DOB": "1989-06-28",
"MaritalStatus": "false",
"CreditCardType": "bankcard",
"y":15
},
{
"id": 13,
"name": "Benson",
"gender": "Male",
"DOB": "1959-10-19",
"MaritalStatus": "true",
"CreditCardType": "switch",
"y":14
},
{
"id": 14,
"name": "Florry",
"gender": "Female",
"DOB": "1993-11-11",
"MaritalStatus": "true",
"CreditCardType": "diners-club-international",
"y":8
},
{
"id": 15,
"name": "Jenine",
"gender": "Female",
"DOB": "1957-02-16",
"MaritalStatus": "false",
"CreditCardType": "diners-club-enroute",
"y":21
},
{
"id": 16,
"name": "Hortense",
"gender": "Female",
"DOB": "1993-12-17",
"MaritalStatus": "false",
"CreditCardType": "jcb",
"y":17
},
{
"id": 17,
"name": "Zulema",
"gender": "Female",
"DOB": "1990-09-27",
"MaritalStatus": "false",
"CreditCardType": "jcb",
"y":18
},
{
"id": 18,
"name": "Leoline",
"gender": "Female",
"DOB": "1990-02-02",
"MaritalStatus": "false",
"CreditCardType": "visa-electron",
"y":8
},
{
"id": 19,
"name": "Bayard",
"gender": "Male",
"DOB": "1997-01-11",
"MaritalStatus": "false",
"CreditCardType": "jcb",
"y":15
},
{
"id": 20,
"name": "Joanne",
"gender": "Female",
"DOB": "1996-02-01",
"MaritalStatus": "false",
"CreditCardType": "maestro",
"y":19
},
{
"id": 21,
"name": "Marlee",
"gender": "Female",
"DOB": "1994-11-28",
"MaritalStatus": "false",
"CreditCardType": "",
"y":13.7
},
{
"id": 22,
"name": "Mitchell",
"gender": "Male",
"DOB": "1993-03-09",
"MaritalStatus": "false",
"CreditCardType": "maestro",
"y":21
},
{
"id": 23,
"name": "Jefferey",
"gender": "Male",
"DOB": "1999-09-19",
"MaritalStatus": "false",
"CreditCardType": "jcb",
"y":30
},
{
"id": 24,
"name": "Jolee",
"gender": "Female",
"DOB": "1951-04-14",
"MaritalStatus": "false",
"CreditCardType": "jcb",
"y":30.5
},
{
"id": 25,
"name": "Selma",
"gender": "Female",
"DOB": "1958-08-14",
"MaritalStatus": "false",
"CreditCardType": "mastercard",
"y":26.9
},
{
"id": 26,
"name": "Pavlov",
"gender": "Male",
"DOB": "1971-12-24",
"MaritalStatus": "true",
"CreditCardType": "jcb",
"y":29.4
}
]
var mycrossfilter = crossfilter(people);
var ageDimension = mycrossfilter.dimension(function(data) {
console.log(data);
return [~~((Date.now() - new Date(data.DOB)) / (31557600000))]
});
var yDimension = mycrossfilter.dimension(function(d){return d.y;})
var trialDimension = mycrossfilter.dimension(function(d){return [+d.y,[ + ~~((Date.now() - new Date(d.DOB)) / (31557600000))]] });
var trialGroup = trialDimension.group()
var chart = dc.scatterPlot('#scatter');
chart
.width(300)
.height(800)
.brushOn(true)
.x(d3.scaleLinear().domain([10, 40]))
.y(d3.scaleLinear().domain([0, 70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.dimension(ageDimension)
.group(trialGroup)
chart.render();
console.log(d3.selectAll('path.symbol'));
//Trial 1
chart.on("renderlet.chart", function(chart){
chart.selectAll('path.symbol').on('click',function(){alert("Hello! It works");});
});
// Trial 2
d3.select('body').on('click', function(){
d3.selectAll('path.symbol').on('mouseover',function(){alert("Hello! It works");});
});
我还使用相同的代码设置了一个 jsfiddle 来帮助重现我的问题，link https://jsfiddle.net/Binny92/eysua84q/
然而，这两个试验都没有在我的案例中起作用。无论我点击什么和在哪里，我都没有得到任何预期的回应。好像我从来没有成功点击任何一个点。但是当我分别 运行 d3.selectAll('path.symbol') 时，浏览器返回给我一个带有 _group 的对象。选定的节点。我无法弄清楚为什么事件操作不起作用，并期待有关此问题的任何建议。
谢谢！
您在 chart.selectAll 函数中传递了错误的值
替换函数：
chart.on("renderlet.chart", function(chart){
chart.selectAll('path.symbol').on('click',function(){
alert("Hello! It works");
});
});
与：
chart.on("renderlet.chart", function(chart){
chart.selectAll('rect').on('click',function(){
alert("Hello! It works");
});
});
现在点击事件有效了！
问题是您有 brushOn(true)，因此 d3.brush 叠加层将拦截所有鼠标事件。
您可以通过右键单击一个点并在开发人员工具中检查它来查看：
我们没有像我们期望的那样检查一个符号（如果我们错过了，也可以检查 svg 元素），我们点击了一个矩形对象。这可能就是为什么@Wolfetto 建议 selecting 这个。但这不是我们想要的，因为如果我们在符号上收到鼠标悬停或单击事件，这些事件将包含点数据。
如果您不想要 2D 刷牙，您可以brushOn(false)。
但如果你想要全部，你可以将画笔覆盖移动到点后面。用户可能会感到困惑，因为他们只能在背景上刷，但至少光标会发生变化以显示将要发生的事情。在我对你的 fiddle 的叉子中，当它位于一个符号上时，我将光标更改为 pointer，这使区别更加清晰。
要将叠加层移到后面，请将此行添加到 renderlet 处理程序：
chart.g().node().insertBefore(chart.select('g.brush').node(), chart.select('g.chart-body').node())
是的，.node() 有点太多了 - 我们只是使用 D3 到 select 个节点，但是浏览器的 insertBefore 实际移动画笔之前（后面）图表主体。
我正在使用基于 d3.js 5.9.2 的 dc.js 库 3.0.12 来绘制散点图。
散点图已经按照我的预期生成了。我的下一步是向点添加一些鼠标悬停或单击事件，以帮助用户从我的数据中获取更多信息。
我已经从这两个问题中参考并改编了一些代码：
dc.js onClick Listener Not Working
show additional data properties on mouseover in dc.js
通过检查散点图上的元素，在我看来，可以通过访问 "path.symbol"
来达到图上的散点因为很难从我自己的页面中分离出数据，所以我生成了一些用于绘图的假数据，以下是我尝试过的代码（使用两种不同的方法）：
var people = [{
"id": 1,
"name": "Damaris",
"gender": "Female",
"DOB": "1973-02-18",
"MaritalStatus": "false",
"CreditCardType": "visa-electron",
"y":12
},
{
"id": 2,
"name": "Barbe",
"gender": "Female",
"DOB": "1969-04-10",
"MaritalStatus": "true",
"CreditCardType": "americanexpress",
"y":14
},
{
"id": 3,
"name": "Belia",
"gender": "Female",
"DOB": "1960-04-16",
"MaritalStatus": "false",
"CreditCardType": "maestro",
"y":8
},
{
"id": 4,
"name": "Leoline",
"gender": "Female",
"DOB": "1995-01-19",
"MaritalStatus": "true",
"CreditCardType": "bankcard",
"y":20
},
{
"id": 5,
"name": "Valentine",
"gender": "Female",
"DOB": "1992-04-16",
"MaritalStatus": "false",
"CreditCardType": "",
"y":16
},
{
"id": 6,
"name": "Rosanne",
"gender": "Female",
"DOB": "1985-01-05",
"MaritalStatus": "true",
"CreditCardType": "bankcard",
"y":22
},
{
"id": 7,
"name": "Shalna",
"gender": "Female",
"DOB": "1956-11-01",
"MaritalStatus": "false",
"CreditCardType": "jcb",
"y":15
},
{
"id": 8,
"name": "Mordy",
"gender": "Male",
"DOB": "1990-03-27",
"MaritalStatus": "true",
"CreditCardType": "china-unionpay",
"y":6
},
{
"id": 9,
"name": "Tristan",
"gender": "Male",
"DOB": "1998-10-05",
"MaritalStatus": "true",
"CreditCardType": "",
"y":21
},
{
"id": 10,
"name": "Alphonso",
"gender": "Male",
"DOB": "1992-08-10",
"MaritalStatus": "false",
"CreditCardType": "mastercard",
"y":12
},
{
"id": 11,
"name": "Hirsch",
"gender": "Male",
"DOB": "1973-02-13",
"MaritalStatus": "false",
"CreditCardType": "",
"y":6
},
{
"id": 12,
"name": "Kirstyn",
"gender": "Female",
"DOB": "1989-06-28",
"MaritalStatus": "false",
"CreditCardType": "bankcard",
"y":15
},
{
"id": 13,
"name": "Benson",
"gender": "Male",
"DOB": "1959-10-19",
"MaritalStatus": "true",
"CreditCardType": "switch",
"y":14
},
{
"id": 14,
"name": "Florry",
"gender": "Female",
"DOB": "1993-11-11",
"MaritalStatus": "true",
"CreditCardType": "diners-club-international",
"y":8
},
{
"id": 15,
"name": "Jenine",
"gender": "Female",
"DOB": "1957-02-16",
"MaritalStatus": "false",
"CreditCardType": "diners-club-enroute",
"y":21
},
{
"id": 16,
"name": "Hortense",
"gender": "Female",
"DOB": "1993-12-17",
"MaritalStatus": "false",
"CreditCardType": "jcb",
"y":17
},
{
"id": 17,
"name": "Zulema",
"gender": "Female",
"DOB": "1990-09-27",
"MaritalStatus": "false",
"CreditCardType": "jcb",
"y":18
},
{
"id": 18,
"name": "Leoline",
"gender": "Female",
"DOB": "1990-02-02",
"MaritalStatus": "false",
"CreditCardType": "visa-electron",
"y":8
},
{
"id": 19,
"name": "Bayard",
"gender": "Male",
"DOB": "1997-01-11",
"MaritalStatus": "false",
"CreditCardType": "jcb",
"y":15
},
{
"id": 20,
"name": "Joanne",
"gender": "Female",
"DOB": "1996-02-01",
"MaritalStatus": "false",
"CreditCardType": "maestro",
"y":19
},
{
"id": 21,
"name": "Marlee",
"gender": "Female",
"DOB": "1994-11-28",
"MaritalStatus": "false",
"CreditCardType": "",
"y":13.7
},
{
"id": 22,
"name": "Mitchell",
"gender": "Male",
"DOB": "1993-03-09",
"MaritalStatus": "false",
"CreditCardType": "maestro",
"y":21
},
{
"id": 23,
"name": "Jefferey",
"gender": "Male",
"DOB": "1999-09-19",
"MaritalStatus": "false",
"CreditCardType": "jcb",
"y":30
},
{
"id": 24,
"name": "Jolee",
"gender": "Female",
"DOB": "1951-04-14",
"MaritalStatus": "false",
"CreditCardType": "jcb",
"y":30.5
},
{
"id": 25,
"name": "Selma",
"gender": "Female",
"DOB": "1958-08-14",
"MaritalStatus": "false",
"CreditCardType": "mastercard",
"y":26.9
},
{
"id": 26,
"name": "Pavlov",
"gender": "Male",
"DOB": "1971-12-24",
"MaritalStatus": "true",
"CreditCardType": "jcb",
"y":29.4
}
]
var mycrossfilter = crossfilter(people);
var ageDimension = mycrossfilter.dimension(function(data) {
console.log(data);
return [~~((Date.now() - new Date(data.DOB)) / (31557600000))]
});
var yDimension = mycrossfilter.dimension(function(d){return d.y;})
var trialDimension = mycrossfilter.dimension(function(d){return [+d.y,[ + ~~((Date.now() - new Date(d.DOB)) / (31557600000))]] });
var trialGroup = trialDimension.group()
var chart = dc.scatterPlot('#scatter');
chart
.width(300)
.height(800)
.brushOn(true)
.x(d3.scaleLinear().domain([10, 40]))
.y(d3.scaleLinear().domain([0, 70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.dimension(ageDimension)
.group(trialGroup)
chart.render();
console.log(d3.selectAll('path.symbol'));
//Trial 1
chart.on("renderlet.chart", function(chart){
chart.selectAll('path.symbol').on('click',function(){alert("Hello! It works");});
});
// Trial 2
d3.select('body').on('click', function(){
d3.selectAll('path.symbol').on('mouseover',function(){alert("Hello! It works");});
});
我还使用相同的代码设置了一个 jsfiddle 来帮助重现我的问题，link https://jsfiddle.net/Binny92/eysua84q/
然而，这两个试验都没有在我的案例中起作用。无论我点击什么和在哪里，我都没有得到任何预期的回应。好像我从来没有成功点击任何一个点。但是当我分别 运行 d3.selectAll('path.symbol') 时，浏览器返回给我一个带有 _group 的对象。选定的节点。我无法弄清楚为什么事件操作不起作用，并期待有关此问题的任何建议。
谢谢！
您在 chart.selectAll 函数中传递了错误的值
替换函数：
chart.on("renderlet.chart", function(chart){
chart.selectAll('path.symbol').on('click',function(){
alert("Hello! It works");
});
});
与：
chart.on("renderlet.chart", function(chart){
chart.selectAll('rect').on('click',function(){
alert("Hello! It works");
});
});
现在点击事件有效了！
问题是您有 brushOn(true)，因此 d3.brush 叠加层将拦截所有鼠标事件。
您可以通过右键单击一个点并在开发人员工具中检查它来查看：
我们没有像我们期望的那样检查一个符号（如果我们错过了，也可以检查 svg 元素），我们点击了一个矩形对象。这可能就是为什么@Wolfetto 建议 selecting 这个。但这不是我们想要的，因为如果我们在符号上收到鼠标悬停或单击事件，这些事件将包含点数据。
如果您不想要 2D 刷牙，您可以brushOn(false)。
但如果你想要全部，你可以将画笔覆盖移动到点后面。用户可能会感到困惑，因为他们只能在背景上刷，但至少光标会发生变化以显示将要发生的事情。在我对你的 fiddle 的叉子中，当它位于一个符号上时，我将光标更改为 pointer，这使区别更加清晰。
要将叠加层移到后面，请将此行添加到 renderlet 处理程序：
chart.g().node().insertBefore(chart.select('g.brush').node(), chart.select('g.chart-body').node())
是的，.node() 有点太多了 - 我们只是使用 D3 到 select 个节点，但是浏览器的 insertBefore 实际移动画笔之前（后面）图表主体。