I am working on a d3.js project where I am displaying a number of rectangles to be the same height. The rectangles are connected to a input[type=number] that adjust the height of each group of rectangles. To make animation easier (so I only have to manipulate the svg:defs onchange of the number input), I would like to be able to specify the height of a group of rectangles with a svg:def tag like this:

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});

and then to be able to just refine placement x, y and width of the rectangles with something like this:

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;});

This snippet correctly changes the x and y coordinates but it does not properly change the width! Any ideas what's wrong here? Is this a browser issue (I'm using Chrome 24.0.1312.52)? Is width not editable like this on an svg:use tag?

There aren't any problems with the data (I've checked that) and I have been able to confirm that the animation does work correctly.

I am working on a d3.js project where I am displaying a number of rectangles to be the same height. The rectangles are connected to a input[type=number] that adjust the height of each group of rectangles. To make animation easier (so I only have to manipulate the svg:defs onchange of the number input), I would like to be able to specify the height of a group of rectangles with a svg:def tag like this:

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});

and then to be able to just refine placement x, y and width of the rectangles with something like this:

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;});

This snippet correctly changes the x and y coordinates but it does not properly change the width! Any ideas what's wrong here? Is this a browser issue (I'm using Chrome 24.0.1312.52)? Is width not editable like this on an svg:use tag?

There aren't any problems with the data (I've checked that) and I have been able to confirm that the animation does work correctly.

• javascript
• svg
• d3.js

1 Answer 1

If you point a <use> element at a <rect> the width/height of the <use> are ignored according to the SVG specification

I rement you put the <rect> in a <symbol>, and then have the use reference the symbol. That way the width/height of the use will apply to the rect. You probably want to make the rect's width/height 100% within the symbol.

In other words, something like this should work:

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;});