Question

我正在尝试使用对象中的这些属性创建任意的列和行组：

        var svg = d3.select("#right-section").append("svg").attr("width",600).attr("height",600);
        var flatInputMatrix = [1,1,1,0,0,3,3,3,0,0,4,4,4,0,0,5,5,5,0,0,0,2,0,4,4,0,0,0,5,5,0,1,0,2,2];
        var m = 5;
        var r = 3;

        var counter = -1;

        var data = flatInputMatrix.map(function(d, i) {
          i % m === 0 ? counter++ : null;
          return {
            column: i % m,
            row: counter,
            value: d
          };
        });

        var columnsGroups = svg.append("g")
        var columns = columnsGroups.selectAll("columns").data(data.column= this.column).enter()

        var numbers = svg.selectAll("numbers").data(data).enter().append("text")
            .attr("x",function(d,i) { return (i % m)*50 + 10 + r; })
            .attr("y",function(d,i) { return Math.floor(i / m) *50+50; })
            .style("opacity", 0.5)
            .text(function(d) { return d.value; })
            .on("mouseover", function(d.columns){d3.select(this).style("opacity", 1)  })

这个想法是让一个列（后面是一组列）在光标悬停时具有opacity = 1。

Answer 1

解决方案＃1

由于您希望按列进行分组，我认为最好的方法是首先嵌套您的数据（当然是按列）：

var nested = d3.nest()
    .key(function(d) {
        return d.column
    })
    .entries(data);

然后，我们追加不同的组，每列一个：

var columns = svg.selectAll("foo")
    .data(nested)
    .enter()
    .append("g")
    .attr("transform", function(d) {
        return "translate(" + (50 + 50 * d.key) + ",0)";
    })
    .style("opacity", 0.5);

最后，我们设置mouseover：

columns.on("mouseover", function() {
    d3.select(this).style("opacity", 1);
}).on("mouseout", function() {
    d3.select(this).style("opacity", 0.5)
})

以下是演示：

＆＃13;

var svg = d3.select("body").append("svg").attr("width", 600).attr("height", 600);

var flatInputMatrix = [1, 1, 1, 0, 0, 3, 3, 3, 0, 0, 4, 4, 4, 0, 0, 5, 5, 5, 0, 0, 0, 2, 0, 4, 4, 0, 0, 0, 5, 5, 0, 1, 0, 2, 2];
var m = 5;
var r = 3;

var counter = -1;

var data = flatInputMatrix.map(function(d, i) {
  i % m === 0 ? counter++ : null;
  return {
    column: i % m,
    row: counter,
    value: d
  };
});

var nested = d3.nest()
  .key(function(d) {
    return d.column
  })
  .entries(data);

var columns = svg.selectAll("foo")
  .data(nested)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(" + (50 + 50 * d.key) + ",0)";
  })
  .style("opacity", 0.5);

var numbers = columns.selectAll("foo")
  .data(function(d) {
    return d.values
  })
  .enter()
  .append("text")
  .attr("y", function(d) {
    return d.row * 50 + 50;
  })
  .text(function(d) {
    return d.value;
  });

columns.on("mouseover", function() {
  d3.select(this).style("opacity", 1);
}).on("mouseout", function() {
  d3.select(this).style("opacity", 0.5)
})

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

<强>溶液＃2

但是，如果您不想重构代码，只需使用mouseover函数中的数据：

numbers.on("mouseover", function(d) {
    var column = d.column;
    numbers.filter(function(d) {
            return d.column === column
        })
        .style("opacity", 1)
}).on("mouseout", function() {
    numbers.style("opacity", 0.5)
})

这样，您可以保持您的代码就像现在一样。这是演示：

＆＃13;

var svg = d3.select("body").append("svg").attr("width", 600).attr("height", 600);

var flatInputMatrix = [1, 1, 1, 0, 0, 3, 3, 3, 0, 0, 4, 4, 4, 0, 0, 5, 5, 5, 0, 0, 0, 2, 0, 4, 4, 0, 0, 0, 5, 5, 0, 1, 0, 2, 2];
var m = 5;
var r = 3;

var counter = -1;

var data = flatInputMatrix.map(function(d, i) {
  i % m === 0 ? counter++ : null;
  return {
    column: i % m,
    row: counter,
    value: d
  };
});

var numbers = svg.selectAll("numbers")
  .data(data)
  .enter()
  .append("text")
  .attr("x", function(d, i) {
    return (i % m) * 50 + 10 + r;
  })
  .attr("y", function(d, i) {
    return Math.floor(i / m) * 50 + 50;
  })
  .style("opacity", 0.5)
  .text(function(d) {
    return d.value;
  });

numbers.on("mouseover", function(d) {
  var column = d.column;
  numbers.filter(function(d) {
      return d.column === column
    })
    .style("opacity", 1)
}).on("mouseout", function() {
  numbers.style("opacity", 0.5)
})

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

按数组中的对象属性分组

1 个答案: