我正在使用 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));
使用 dc.js 并不会阻止您使用 d3,它只是为您设置一些东西。
所以一旦你有了图表,你就可以使用dc.全选 https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#selectselector获取图表中 d3 svg 元素的选择,然后d3.on https://github.com/mbostock/d3/wiki/Selections#on将事件处理程序附加到选择。
更好的是,将其放入渲染器 https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#renderletrenderletfunction 以便处理程序在图表更新时得到更新。
编辑:渲染器已被弃用,有利于events http://dc-js.github.io/dc.js/docs/html/dc.baseMixin.html#on,并且 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
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)