Question

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

请建议。

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

Answer 1

使用dc.js不会阻止你使用d3，它只会为你设置内容。

因此，一旦获得了图表，就可以使用dc.selectAll在图表中获取d3选择的svg元素，然后d3.on将事件处理程序附加到选择中。

更好的是，~~将其置于renderlet~~ 中，以便处理程序在图表显示时更新。

编辑：不推荐使用renderlet而使用events，并且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
    });
});

Answer 2

另一个答案是正确的，但这是一个如何操作的代码示例，从您的直流图开始：

dc.dataGrid(".dc-data-grid").dimension(name).group(function (d) {
               ... etc ...

然后添加：

.renderlet（function（grid）{grid.selectAll（＆＃34; .dc-grid-item＆＃34;）。on（＆＃39; click＆＃39;，function（d）{ MyPopupFunction（d）; }）;

dc散点图绑定onClick事件

2 个答案: