javascript - 鼠标悬停或 onclick 事件不适用于 dc.js 中的散点图

Question

我正在使用基于 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 来帮助重现我的问题，链接为 https://jsfiddle.net/Binny92/eysua84q/

然而，这两项试验均未对我的案例起作用。无论我点击什么和在哪里，我都没有得到任何预期的回应。好像我从来没有成功点击任何一个点。但是当我单独运行 d3.selectAll('path.symbol') 时，浏览器返回给我一个带有 _group 的对象。选定的节点。我无法弄清楚为什么事件操作不起作用，并期待有关此问题的任何建议。

谢谢!

Answer 1

问题是你有 brushOn(true) 所以 d3.brush overlay 将拦截所有鼠标事件。

您可以通过右键单击一个点并在开发人员工具中检查它来看到这一点:

我们没有像我们期望的那样检查一个符号(如果我们错过了，也可以检查 svg 元素)，我们点击了一个矩形对象。这可能就是为什么 @Wolfetto 建议改为选择它的原因。但这不是我们想要的，因为如果我们在符号上收到鼠标悬停或单击事件，这些事件将包含点数据。

如果您不想要 2D 刷牙，您可以执行 brushOn(false)。

但如果你想要全部，你可以将画笔覆盖移动到点后面。用户可能会感到困惑，因为他们只能在背景上刷，但至少光标会发生变化以显示将要发生的事情。在我对你的 fiddle 的 fork 中，当它位于一个符号上时，我将光标更改为 pointer，这使得区别更加清晰。

要将叠加层移到后面，请将此行添加到 renderlet 处理程序:

chart.g().node().insertBefore(chart.select('g.brush').node(), chart.select('g.chart-body').node())

是的，.node() 有点太多 - 我们只是使用 D3 来选择节点，但浏览器的 insertBefore在图表主体之前(之后)实际移动画笔。

Fork of your fiddle.