2

我正在开发一个 d3.js 项目，在该项目中我将多个矩形显示为相同的高度。矩形连接到input[type=number]调整每组矩形高度的a。为了使动画更容易（所以我只需要操作svg:defs数字输入的 onchange），我希望能够使用如下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

如果根据SVG 规范<use>将元素指向<rect>的宽度/高度将被忽略<use>

我建议您将其<rect>放入 a<symbol>中，然后让 use 引用该符号。这样，使用的宽度/高度将适用于矩形。您可能希望在符号内使矩形的宽度/高度为 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 回答