D3.js dc散点图绑定onClick事件

D3.js dc散点图绑定onClick事件,d3.js,dc.js,D3.js,Dc.js,我正在使用dc.scatterPlot。。无法找到如何将鼠标单击绑定到散点图中的不同符号(数据点)。 我想我应该先访问_符号,然后设置属性,但似乎没有办法访问散点图的_符号,或者可能我完全弄错了 请建议 var individualEventchart = dc.seriesChart("#event-individual-chart"); var symbolScale = d3.scale.ordinal().range(d3.svg.symbolTypes); var symbolAcce

我正在使用dc.scatterPlot。。无法找到如何将鼠标单击绑定到散点图中的不同符号(数据点)。 我想我应该先访问_符号,然后设置属性,但似乎没有办法访问散点图的_符号,或者可能我完全弄错了

请建议

var individualEventchart = dc.seriesChart("#event-individual-chart");
var symbolScale = d3.scale.ordinal().range(d3.svg.symbolTypes);
var symbolAccessor = function(d) { return symbolScale(d.key[0]); };
var subChart = function(c) {
    return dc.scatterPlot(c)
    .symbol(symbolAccessor)
    .symbolSize(8)
    .highlightedSize(10)
};

individualEventchart
.margins({top: 25, right: 30, bottom: 30, left: 40})
.width(882)
.height(250)
.chart(subChart)
.x(d3.scale.linear().domain([0,24]))
.brushOn(false)
.yAxisLabel("Severity")
.xAxisLabel("Time of the day")
.elasticY(true)
.dimension(individualDimension)
.group(individualGroup)
.mouseZoomable(false)
.seriesAccessor(function(d) {return d.key[0];})
.keyAccessor(function(d) {return +d.key[1];})
.valueAccessor(function(d) {return d.value;})
.legend(dc.legend().x(450).y(0).itemHeight(20).gap(5).horizontal(1).legendWidth(540).itemWidth(150));

使用dc.js并不会阻止您使用d3,它只是为您设置了一些东西

因此,一旦有了图表,就可以使用它在图表中获得svg元素的d3选择,然后将事件处理程序附加到选择中

更好的是,将它放在一个列表中,以便在图表更新时处理程序得到更新

编辑:renderlet已被弃用,取而代之的是pretransition事件,它通常比renderlet事件好

下面是示例代码:

plot.on('pretransition', function() {
    plot.selectAll('path.symbol').on('click', function(d) {
         // do something here; d contains the data for the clicked symbol
    });
});

另一个答案是正确的,但下面是一个代码示例,说明如何执行此操作,请从dc图表开始:

dc.dataGrid(".dc-data-grid").dimension(name).group(function (d) {
               ... etc ...
然后添加:

.renderlet(函数(网格){grid.selectAll(.dc网格项”)。在('click',函数(d)上{ MyPopupFunction(d);
})

我会尝试一下,然后回来。非常感谢您的回复。嗨,戈登,非常感谢您的回复。我无法让它正常工作。因此,好像每个数据点都有一个与之关联的ID,单击后,我想在页面上打印该点的所有信息。当您说dc.select,然后是d3.on..您能请请给出一个非常简单的例子来说明如何做到这一点。很抱歉打扰你。嗨,戈登,如果你有时间看的话,我发布了这个进一步的(相关的)问题: