Question

我有一个使用d3.js和svg表示的网格。我想要做的是在单击图块时更改图块和所有相邻图块的颜色。我想知道选择单击旁边的瓷砖的最佳方法。到目前为止我的代码：

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("transform", translate)
    .attr("position", pos)
    .attr("width", z)
    .attr("height", z)
    .attr("clicked", false)
    //.on("mouseover", mouseover)
    .on("click", click)
    .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 pos(d) {
  return [ (d % x) * z , Math.floor(d / x) * z ];
}

function click(d) {
  var currentColor = this.style.fill;
  var clickedYet = d3.select(this).attr("clicked");
  currentColor = currentColor == "rgb(255, 255, 255)" ? "rgb(255, 0, 255)" : "rgb(255, 255, 255)";


  d3.select(this)
    .attr("clicked", true)
    .transition()
      .style("fill", currentColor);

}

我想知道的是，是否可以选择瓷砖/＆＃34; rect＆＃34;按属性位置？或者，如果我应该考虑一种完全不同的方法？

Answer 1

你可以这样做（选择同一行中的所有矩形）：

我已经对代码进行了评论，以便更好地理解算法。

function click(d) {
  var currentColor = this.style.fill;
  //this will give the data associated with the rectangle
  var clickeddata = d3.select(this).data();
 //this will give the row to be highlihted
  var row = parseInt(clickeddata/x);
  //current color calculation
  currentColor = currentColor == "rgb(255, 255, 255)" ? "rgb(255, 0, 255)" : "rgb(255, 255, 255)";
  //iterate through all the rectangle
  d3.selectAll("rect")[0].forEach(function(r){
    //all rectangle with same row 
    if(parseInt(d3.select(r).data()/x) == row){
      //make it color as it is in the same row
      d3.select(r)
        .attr("clicked", true)
        .transition()
          .style("fill", currentColor);     
    }
  });

工作代码here。

按属性选择d3.js数据元素

1 个答案: