dc散点图绑定onClick事件 [英] dc scatter plot binding onClick event

问题描述

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

I am using dc.scatterPlot .. Not able to find how can I bind mouse on click to different symbols (data points) in scatter plot. I think I should first access _symbol and then set attribute, but it seems like there is no way to access _symbol of scatter plot or may be I am getting this completely wrong.

请建议。

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，它只是为你设置的东西。

Using dc.js doesn't stop you from using d3, it just sets stuff up for you.

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

So once you have your chart you can use dc.selectAll to get a d3 selection of svg elements in the chart, and then d3.on to attach event handlers to the selection.

更好，将它放在 renderlet ，以便在图表执行时更新处理程序。

Even better, put it in a renderlet so that the handlers get updated when the chart does.

编辑：renderlet已被弃用， =http://dc-js.github.io/dc.js/docs/html/dc.baseMixin.html#on =nofollow noreferrer>事件，而前期转换事件通常更好比渲染事件。

renderlets have been deprecated in favor of events, and the pretransition event is usually better than the renderlet event.

以下是示例代码：

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

这篇关于dc散点图绑定onClick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！