d3.js - D3 如何从组中选择具有共享属性的多个形状？

Question

D3 如何在具有共享属性的组中选择多个形状？

我正在 D3 中构建一个图表，其中每个数据点都由多个形状表示。我有一个简单的数据集，我创建了一个组，其中绑定(bind)了三组单独的形状。

我希望一行上的形状在鼠标悬停和鼠标悬停时改变颜色。有两个函数——“over”和“out”——我在鼠标悬停时调用它们。他们成功地更改了对象的样式属性，但依次更改了每组形状。

下面的代码和this fiddle说明问题。

这种方法不能跨形状缩放，感觉就像我错过了关于 D3 选择的关键点。我可以一步选择所有具有共享索引(或其他属性)的对象吗？

我尝试了各种方法:

选择(“形状”)。过滤器(...)

选择(“形状”)[0][i]

但还没有成功地让这些工作。

var dataset = ["A", "B", "C"];

// Create SVG object
var svg = d3.select("body")
    .append("svg")
    .attr({width: 600, height: 400});

var shapes = svg.append("g");

// Circles
var circles = shapes.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("id",function(d, i) {return i;})
    .attr("cx",125)
    .attr("cy",function(d, i) {return (i+1)*100-25;})
    .attr("r",25)
    .on("mouseover", over)
    .on("mouseout", out)
    .append("title").text(function(d, i) {return d + " " + i;});

// Ellipses
var ellipses = shapes.selectAll("ellipse")
    .data(dataset)
    .enter()
    .append("ellipse")
    .attr("cx", 350)
    .attr("cy",function(d, i) {return (i+1)*100-25;})
    .attr("rx",50)
    .attr("ry",25)
    .on("mouseover", over)
    .on("mouseout", out)
    .append("title").text(function(d, i) {return d + " " + i;});

// Squares
var squares = shapes.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", 200)
    .attr("y",function(d, i) {return (i+1)*100-50;})
    .attr("height",50)
    .attr("width",50)
    .on("mouseover", over)
    .on("mouseout", out)
    .append("title").text(function(d, i) {return d + " " + i;});

// Over function to be called on mouseover
function over(d, i) {
    shapes.selectAll("circle").filter(function(e, j) {return j == i;})
        .style("fill", "green");
    shapes.selectAll("rect").filter(function(e, j) {return j == i;})
        .style("fill", "green");
    shapes.selectAll("ellipse").filter(function(e, j) {return j == i;})
        .style("fill", "green");
}

// Out function to be called on mouseout
function out(d, i) {
    shapes.selectAll("rect").filter(function(e, j) {return j == i;})
        .style("fill", null);
    shapes.selectAll("circle").filter(function(e, j) {return j == i;})
        .style("fill", null);
    shapes.selectAll("ellipse").filter(function(e, j) {return j == i;})
        .style("fill", null);
}

Answer 1

如果将它们与 g 捆绑在一起，则更容易处理元素组。元素。在您的情况下，您将拥有一个 g对于每一行并将元素和处理程序附加到该行。然后，在鼠标事件上，您只需选择要操作的组的所有后代元素。

我已将您的 jsfiddle 修改为 here .关键是组的创建

var gs = shapes.selectAll("g").data(dataset)
  .enter()
  .append("g")
  .attr("id",function(d, i) {return i;})
  .attr("transform",function(d, i) {return "translate(0," + i*100 + ")";})
  .on("mouseover", over)
  .on("mouseout", out);

和大大简化的事件处理程序

function over(d, i) {
  d3.select(this).selectAll("*").style("fill", "green");
}