Question

我正在使用基于d3.js 5.9.2的dc.js库3.0.12作为散点图。

散点图已按照我的预期生成。我的下一步是在这些点上添加一些鼠标悬停或单击事件，以帮助用户从我的数据中获取更多信息。

我从这两个问题中引用并修改了一些代码：

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");});
  });

我还通过链接https://jsfiddle.net/Binny92/eysua84q/

用相同的代码设置了一个jsfiddle来帮助重现我的问题。

但是，在我的案子中，两项审判均无效。无论我在何处单击，都没有得到预期的响应。似乎我从未成功单击任何要点。但是当我分别运行d3.selectAll（'path.symbol'）时，浏览器向我返回了一个带有_group的对象。所选节点的数量。我无法弄清楚为什么该事件操作不起作用，并且希望对此问题提出任何建议。

谢谢！

Answer 1

问题是您拥有brushOn(true)，因此d3.brush叠加层将拦截所有鼠标事件。

您可以通过右键单击一个点并在开发人员工具中对其进行检查来查看：

我们没有像我们期望的那样检查符号（或者如果错过了则为svg元素），而是命中了rect对象。这可能就是为什么@Wolfetto建议选择此选项的原因。但这不是我们想要的，因为如果我们在符号上收到鼠标悬停或单击事件，则事件将包括点数据。

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

但是，如果需要全部，可以将笔刷覆盖层移到这些点的后面。用户可能会感到困惑，因为他们只能在背景上刷一下，但是至少光标会变化以显示会发生什么。在您的小提琴叉子中，当光标位于符号上时，我将光标更改为pointer，这使区别更加清晰。

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

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

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

Fork of your fiddle.

Answer 2

您在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");
     });
 });

现在点击事件有效！

鼠标悬停或onclick事件在dc.js中的scatterPlot上不起作用

2 个答案: