1
我正在使用d3.js構建地圖用戶連接,我想從任意用戶的圈子中點擊到其他5個鏈接,但我無法確定如何檢測/檢測點擊的特定點/圈。如何在d3.js地圖上選擇點連接器?
這裏我重視我的腳本:
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();
}
});
我要畫只爲點擊圓圈的聯繫,但我的代碼確實爲代替各界!
你可以嘗試'函數(d){userConnectors(d);'和內userConnectors方法:'投影(dx)//或d.cx'。如果你能提供一個小提琴/ plunkr會更容易。 – echonax
非常感謝,現在有效。 –