d3 onclick获取具体path/bar参考

Question

如果我有一个 d3/dc 图表，并且我设置了一个点击事件处理程序，如下所示：

    var data = [{
    "city": "New York",
        "neighborhood": "N/A",
        "hits": 200
}, {
    "city": "New York",
        "neighborhood": "Brooklyn",
        "hits": 225
}, {
    "city": "New York",
        "neighborhood": "Queens",
        "hits": 1
}, {
    "city": "San Francisco",
        "neighborhood": "Chinatown",
        "hits": 268
}, {
    "city": "San Francisco",
        "neighborhood": "Downtown",
        "hits": 22
}, {
    "city": "Seattle",
        "neighborhood": "N/A",
        "hits": 2
}, {
    "city": "Seattle",
        "neighborhood": "Freemont",
        "hits": 25
}];
var pieChart = dc.pieChart("#pieChart"),
    rowChart = dc.rowChart("#rowChart");
var ndx = crossfilter(data),
    cityDimension = ndx.dimension(function (d) {
        return d.city;
    }),
    cityGroup = cityDimension.group().reduceSum(function (d) {
        return d.hits;
    }),
    neighborhoodDimension = ndx.dimension(function (d) {
        return d.neighborhood;
    }),
    neighborhoodGroup = neighborhoodDimension.group().reduceSum(function (d) {
        return d.hits;
    });

pieChart.width(200)
    .height(200)
    .slicesCap(4)
    .dimension(cityDimension)
    .group(cityGroup);
pieChart.filter = function() {};

    var colorScale = d3.scale.ordinal()
            .domain(["San Francisco", "New York", "Seattle"])
            .range(["#D82C8C", "#17A7CF", "#E58304"]);

    pieChart.colors(colorScale);

rowChart.width(500)
    .height(500)
    .dimension(neighborhoodDimension)
    .group(neighborhoodGroup);

dc.renderAll();

var clickChart = d3.select("#pieChart")
clickChart.on("click",function(e){
      console.log(this)
      console.log(d3.select(this.parentNode))
})

我正在尝试找到一种方法来引用我正在单击的特定 path/bar/etc。所以在 fiddle 示例中，我希望能够获取我正在单击的城市，这可能吗？

JSFiddle

Answer 1

而不是 selecting <div>，只是 select 路径并在 "click" 函数中获取数据（第一个参数）：

var clickChart = d3.selectAll("path").on("click", function(e) {
    console.log(e.data.key)
})

这是你的fiddle：http://jsfiddle.net/1sbrng9n/

d3 onclick获取具体path/bar参考

d3 onclick to get the specific path/bar reference

d3.js

crossfilter

dc.js