Question

我正在使用d3.js构建地图用户的连接，我想从任意用户的圈子中随机绘制点击链接到其他5个，但我无法确定如何检测/感知点击特定点/圈。

这里我附上了我的剧本：

d3.json("users.json", function(error, data) {

                var tip = d3.tip()
                          .attr('class', 'd3-tip')
                          .offset([-10, 0])
                          .html(function(d) {
                            var name   = d.first_name,
                                email  = d.email,
                                gender = d.gender;

                            return "<strong><center>Personal info </center></strong>"+
                                    "Name  : <span style='color:red'>" + name +"</span></br>"+
                                    "Email : <span style='color:red'>" + email +"</span></br>"+
                                    "Gender: <span style='color:red'>" + gender +"</span>";
                          });

                svgElem.call(tip);

                // add circles to svg
                var circle = svgElem.selectAll("circle")
                            .data(data)
                            .enter()
                            .append("circle")
                            .attr("cx", function(d) { return projection([ d["longitude"], d["latitude"] ])[0]; })
                            .attr("cy", function(d) { return projection([ d["longitude"], d["latitude"] ])[1]; })
                            .attr("r", "3px")
                            .attr("fill", "red");


                circle.on("mouseover", tip.show)
                .on("mouseout", tip.hide)
                .on("click", function(){userConnectors();});

                var lineTransition = function lineTransition(path) {
                            path.transition()
                                //NOTE: Change this number (in ms) to make lines draw faster or slower
                                .duration(5500)
                                .attrTween("stroke-dasharray", tweenDash)
                                .each("end", function(d,i) { 
                                    d3.select(this).call(transition); 
                                });
                        };

                var tweenDash = function tweenDash() {
                    var len = this.getTotalLength(),
                        interpolate = d3.interpolateString("0," + len, len + "," + len);

                    return function(t) { return interpolate(t); };
                };

                var links = [
                    {
                        type: "LineString",
                        coordinates: [
                            [ data[0].longitude, data[0].latitude ],
                            [ data[1].longitude, data[1].latitude ]
                        ]
                  }
                ];

                links = [];               
                 //update
                var userConnectors = function(){


                        for (var j = 0; j < 5; j++) {
                            links.push({
                                type: "LineString",
                                coordinates: [
                                    [ projection(d3.select("circle").attr("cx")), projection(d3.select("circle").attr("cy")) ],
                                    //[ data[i].longitude, data[i].latitude ],
                                    [ data[j].longitude, data[j].latitude ]
                                ]
                            });
                        }

                    var pathArcs = arcGroup.selectAll(".arc")
                               .data(links)
                               .enter()
                               .append("path").attr({
                                    'class': 'arc'
                                })
                               .style({ 
                                    fill: 'none',
                                });

                    pathArcs.attr({
                        d: path
                    })
                    .style({
                        stroke: 'green',
                        'stroke-width': '2px'
                    })
                    // Uncomment this line to remove the transition
                    .call(lineTransition); 
                   // pathArcs.exit().remove();
                }
            });

我想仅为点击的圈子绘制链接，但我的代码却适用于所有圈子！

Answer 1

而不是使用

.on("click", function(){userConnectors();});

尝试

 .on("click", function(d){userConnectors(d);});

在方法内：

 var userConnectors = function(d){

...

 coordinates: [
               [ d.longitude, d.latitude ], //as OP said
               [ data[j].longitude, data[j].latitude ]
              ]

如何在d3.js中选择地图上的点连接器？

1 个答案: