如何使用d3js在svg中生成元素时恢复索引?

时间:2016-10-26 15:29:25

标签: javascript d3.js

我正在生成一个散点图,但是当我点击圆圈时我想做点什么(这里调用print_description打印一些关于我点击的圆圈的信息,我使用了一个更复杂的功能但是#39 ;不是问题是什么。)

var circles;
var datas; //defined somewhere else, a big array of objects
var svg = d3.select('#svg');
var scale; //defined somewhere else, a regular d3 scale

function create_circles() {
    svg.selectAll("circle").remove();
    circles = svg.selectAll("circle")
        .data(datas)
        .enter()
        .append("circle")
        .on("click", print_description);
    circles.attr("class", "point")
        .attr("cx", function(d,i) {return scale(d.position[0]);})
        .attr("cy", function(d,i) {return scale(d.position[1]);})
//these functions are not detailed here but don't worry, they work fine:
        .attr("r", function(d,i) {return get_circle_size(d.nature, d.score);})
        .attr("fill", function(d,i) {return get_color_from_nature(d.nature);})
        .attr("opacity", function(d,i) {return get_opacity_from_nature(d.nature);});
}

var focus_circle = "initial";
function print_description(d,i) {
    if (focus_circle != "initial") {
        focus_circle.attr("selected", "false");
    }
    focus_circle = d3.select(circles[0][i]);
    focus_circle.attr("selected", "true");
    d3.select('#nodeInfos').html(d.label+"<br/> "+d.infos);
}

然后我想能够触发给定圈子的print_description而不必点击它,例如我想触发它​​对应于datas时某个值的圆圈点击按钮。

例如,让我们说:

datas[445] = {
  label: 'Tom',
  position: [5, 17],
  nature: 'friend',
  infos: 'a bit shy, but nice anyway'
}

我想触发print_description,就像我按下按钮时点击相应的圈子一样。

var lab = 'Tom';
searchBtn.onclick = function() {
    print_description(??); //what can I use as arguments here ?
};

有关如何做到这一点的想法吗?

0 个答案:

没有答案