d3.js - dc散点图绑定(bind)onClick事件

标签 d3.js dc.js

我正在使用 dc.scatterPlot .. 无法找到如何将鼠标单击绑定(bind)到散点图中的不同符号(数据点)。 我想我应该先访问 _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.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
    });
});

关于d3.js - dc散点图绑定(bind)onClick事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22744802/

相关文章:

javascript - 通过queue.defer发送查询字符串

javascript - D3 交叉过滤器分组

d3.js - dc.js 系列图表多线

javascript - 使用 dc.js 仅呈现特定图表

node.js - 如何使用 d3.js 从 Mapbox 检索矢量切片并转换为 geojson?

javascript - 图表不会在 `onchange` 函数中重绘

javascript - 使用 d3 - 单击按钮时如何从数组中选择特定数据以突出显示?

dc.js - 如何在我使用 dc.js 设置的特定条件下显示散点图

javascript - SVG 不显示通过 d3 和 jquery 添加的元素

javascript - D3 图表未显示