Question

我有一个在d3.js中运行的气泡/散点图，但出于某种原因，当我尝试在圆圈上添加点击事件处理程序时，我得到一个未定义的错误。

我已经尝试按顺序移动点击处理程序，我尝试过简单的警报，但是我得到了同样的错误。

TypeError: 'undefined' is not a function (near '....on("click", function(d...')

问题出在哪里？

function click(d) {
  svg.selectAll(".active").classed("active", false);
  d3.select(this).classed("active", active = d);
}

function reset() {
  svg.selectAll(".active").classed("active", active = false);
}

function renderBubbleGraph(data){

// define some variables for the bubble chart
    var w = parseInt(mainWidth(), 10),
        h = 500,
        margin = {top: 48, right: 48, bottom: 48, left: 72};

    var svg = d3.select("#chart")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

    var x = d3.scale.linear().domain([0, 50]).range([margin.left, w-margin.right]),
        y = d3.scale.linear().domain([0, 80000]).range([h-margin.bottom, margin.top]);

    var xAxis = d3.svg.axis()
                      .scale(x)
                      .orient("bottom")
                      .ticks(5),

        yAxis = d3.svg.axis()
                      .scale(y)
                      .orient("left")
                      .ticks(10)
                      .tickFormat(function(d) {return abbreviate(d,0,false,'K'); });
    //bubble radius range and scale
    var max_r = d3.max(data.map(
                           function (d) { return d.Size; })),
            r = d3.scale.linear()
                .domain([0, d3.max(data, function (d) { return d.Size; })])
                .range([0, 80]);

    //start drawing the chart
    svg.append("g")
        .attr("class", "axis x-axis")
        .attr("transform", "translate(0, "+(h-margin.bottom)+")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "axis y-axis")
        .attr("transform", "translate("+(margin.left)+", 0)")
        .call(yAxis);    

    svg.append("text")
        .attr("class", "loading")
        .text("Loading ...")
        .attr("x", function () { return w/2; })
        .attr("y", function () { return h/2-5; });

    svg.selectAll(".loading").remove();

    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", "bubble")
        .attr("cx", function (d) { return x(d.Number);})
        .attr("cy", function (d) { return y(d.Avg);})
        .transition()
        .duration(800)
        .attr("r", function (d) { return r(d.Size); })
        .on("click", function(d){click(d)});

}
$(document).ready(function() {

    $.getJSON('/data/mydata.json', function(data) {
        renderBubbleGraph(data);
    });

});

谢谢！

Answer 1

D3中的转换不支持'on'函数They only exist on selections。因此，您需要将该事件监听器移动到转换之上和追加之后。像这样：

svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .on("click", function(d){click(d)})
    .attr("class", "bubble")
    .attr("cx", function (d) { return x(d.Number);})
    .attr("cy", function (d) { return y(d.Avg);})
    .transition()
    .duration(800)
    .attr("r", function (d) { return r(d.Size); });

这应该是您想要的行为，因为如果您稍后使用不同的绘图参数调用renderBubbleGraph，则每次重新渲染圆圈时都不希望添加单击事件侦听器。

Answer 2

使用点击事件，它很适合我。

    node.append("circle")
    .attr("id", function(d) { return d.id; })
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return color(d.package); })
    .on("click", function(d) {
        alert("on click get data" + d.id);
    });

d3.js：点击气泡/散点图中的事件

2 个答案: