4

D3 は、共有属性を持つグループ内の複数の図形をどのように選択できますか?

各データポイントが多数の形状で表される D3 でグラフを作成しています。単純なデータ セットがあり、それにバインドされた 3 つの個別の図形セットを持つグループを作成します。

マウスオーバーおよびマウスアウトすると、行の形状の色が変わるようにします。"over" と "out" の 2 つの関数があり、マウスオーバーで呼び出すことができます。オブジェクトのスタイル プロパティは正常に変更されますが、形状のセットごとに順番に変更されます。

以下のコードとこのフィドルは、問題を示しています。

このアプローチは形状を超えてスケ​​ーリングされず、D3 の選択に関する重要なポイントが欠けているように感じます。共有インデックス (または他の属性) を持つすべてのオブジェクトを 1 ステップで選択できますか?

私はさまざまなアプローチを試しました：

  • select("シェイプ").filter(...)
  • select("シェイプ")[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);
}
4

1 に答える 1

5

要素をグループ化すると、要素のグループを処理しやすくなりますg。あなたの場合、g各行に 1 つあり、それに要素とハンドラーをアタッチします。次に、マウス イベントで、操作するグループのすべての子孫要素を選択するだけです。

私はあなたのjsfiddleをここに変更しました。重要なのはグループの作成です

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");
}
于 2013-09-30T09:35:38.130 に答える