我有一个使用d3和svg表示的网格。我正在尝试选择网格上任何特定图块的相邻(相邻)图块。可以通过它们在网格上的x和y坐标来访问这些图块。
我所感觉的很困惑,并且没有完全按照我想要的做,我不想选择单击的图块或与之成对 Angular 的图块。
var w = 960,
h = 500,
z = 20,
x = w / z,
y = h / z;
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(d3.range(x * y))
.enter().append("rect")
.attr("width", z)
.attr("height", z)
.attr("clicked", false)
.attr('x', horizontalpos)
.attr('y', verticalpos)
.on("click", test)
.style("stroke", "rgb(6,120,155)")
.style("stroke-width", 2)
.style("fill", "rgb(255, 255, 255)")
function translate(d) {
return "translate(" + (d % x) * z + "," + Math.floor(d / x) * z + ")";
}
function verticalpos(d) {
return ((d % x) * z);
}
function horizontalpos(d) {
return (Math.floor(d / x) * z );
}
function test(){
var d = d3.selectAll("[x='40']").filter("[y='40']");
d3.selectAll("[x=" + "'"+ (parseInt(d.attr("x")) +20).toString() +"'" +"],[x=" + "'"+ (parseInt(d.attr("x")) -20).toString() +"'" +"],"+ "[x=" + "'"+ (parseInt(d.attr("x"))).toString() +"'" +"]")
.filter("[y=" + "'"+ (parseInt(d.attr("y"))).toString() +"'" +"],[y=" + "'"+ (parseInt(d.attr("y")) +20).toString() +"'" +"]"+",[y=" + "'"+ (parseInt(d.attr("y")) -20).toString() +"'" +"]")
.transition()
.style("fill", "black");
}
jsfiddle-https://jsfiddle.net/wkencq2w/15/
我想知道的是-是否可以通过两个属性来选择数据,如下所示:
d3.select("[x='40'], [y='40']")
这对我不起作用,但其背后的逻辑是我想如何选择数据。
最佳答案
我试图使用过滤器解决此问题:
function test(d){
var x = d3.select(this);
var x1 = (parseInt(x.attr("x")) +20);
var x2 = (parseInt(x.attr("x")) -20);
var y1 = (parseInt(x.attr("y")) +20);
var y2 = (parseInt(x.attr("y")) -20);
var f = d3.selectAll("rect")[0].filter(function(d){
//left rect
if (d3.select(d).attr("x") == x1 && d3.select(d).attr("y") == parseInt(x.attr("y")))
return true;
//right rect
if (d3.select(d).attr("x") == x2 && d3.select(d).attr("y") == parseInt(x.attr("y")))
return true;
//bottom rect
if (d3.select(d).attr("y") == y1 && d3.select(d).attr("x") == parseInt(x.attr("x")))
return true;
//top rect
if (d3.select(d).attr("y") == y2 && d3.select(d).attr("x") == parseInt(x.attr("x")))
return true;
return false;
});
//select all filtered and make their fill black
d3.selectAll(f).transition().delay(100).style("fill", "black");
}
工作代码here
希望这可以帮助!
关于javascript - 基于多个属性d3选择数据,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34608936/