2

私は、同じ高さになるように多数の長方形を表示している d3.js プロジェクトに取り組んでいます。input[type=number]長方形は、長方形の各グループの高さを調整する に接続されています。アニメーションを簡単にするために (数値入力の onchange を操作するだけで済みます)、次のようなタグsvg:defsで四角形のグループの高さを指定できるようにしたいと考えています。svg:def

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);
svg.append("defs").selectAll(".rectdef")
  .data(data).enter()
  .append("rect")
  .attr("class", "rectdef")
  .attr("id", function (d, i){return "rect" + d.name;})
  .attr("x", 0)      // overridden below
  .attr("width", 0)  // overridden below
  .attr("y", 0)      // overridden below
  .attr("height", function (d, i){return d.height});

次に、次のような方法で長方形の配置 x、y、および幅を調整できるようにします。

svg.selectAll(".bar")
  .data(data).enter()
  .append("use")
  .attr("class", "bar")
  .attr("xlink:href",function (d){return "#rect"+d.type;})
  .attr("x", function(d) { return d.x })
  .attr("width", function (d) {return d.w;})  // this does NOT adjust width!
  .attr("y", function (d) {return 0;});

このスニペットは x 座標と y 座標を正しく変更しますが、幅は正しく変更しません! ここで何が問題なのですか？これはブラウザの問題ですか (Chrome 24.0.1312.52 を使用しています)? svg:use タグで、このように幅を編集することはできませんか?

データに問題はなく（確認済み）、アニメーションが正常に動作することを確認できました。

4

1 に答える 1

8

<use>要素をの<rect>幅/高さに向けると、 SVG仕様<use>に従って無視されます

を入れて、シンボルを使用することをお勧めし<rect>ます<symbol>。そうすれば、使用の幅/高さが長方形に適用されます。おそらく、シンボル内でrectの幅/高さを100％にしたいと思うでしょう。

言い換えれば、このようなものが機能するはずです：

svg.append("defs").selectAll(".rectdef")
  .data(data).enter()
  .append("symbol")
  .attr("class", "rectdef")
  .attr("id", function (d, i){return "rect" + d.name;})
  .append("rect")
  .attr("x", 0)           // overridden below
  .attr("width", "100%")  // overridden below
  .attr("y", 0)           // overridden below
  .attr("height", function (d, i){return d.height});

svg.selectAll(".bar")
  .data(data).enter()
  .append("use")
  .attr("class", "bar")
  .attr("xlink:href",function (d){return "#rect"+d.type;})
  .attr("x", function(d) { return d.x })
  .attr("width", function (d) {return d.w;})  // this correctly adjusts width!
  .attr("y", function (d) {return 0;});
于 2013-01-24T14:39:20.133 に答える