CODEWITHSUNDEEP
d3.jsresponsive-design
Matt Cheely
Matt Cheely

Reputation: 91

SVG generated with D3 doesn't scale like seemingly identical static SVG content

I'm generating an svg visualization with d3 that I'd like to have scale with it's container in a responsive way. I can directly create an SVG element that behaves this way, but when I write a d3 script that generates the same SVG markup, it doesn't scale.

Here's the d3 code that generates the SVG element:

var arc = d3.svg.arc()
    .startAngle(0)
    .innerRadius(36)
    .outerRadius(48);

var svg = d3.select('#d3').append('svg')
            .attr('width', '100%')
            .attr('height', '100%')
            .attr('viewbox', '0, 0, 100, 100')
            .attr('preserveAspectRatio', 'xMidYMid')
            .append('g')
                .attr('transform', 'translate(50, 50)');

var loop = svg.append('g')
    .attr('class', 'percent-wheel');

loop.append('path')
    .attr('class', 'background')
    .attr('d', arc.endAngle(2 * Math.PI));

And here's the resulting SVG markup, which scales correctly when inserted into the DOM statically:

<div id="d3" class="container">   
  <svg preserveAspectRatio="xMidYMid" viewbox="0, 0, 100, 100" height="100%" width="100%">
    <g transform="translate(50, 50)">
      <g class="percent-wheel">
        <path d="M0,48A48,48 0 1,1 0,-48A48,48 0 1,1 0,48M0,36A36,36 0 1,0 0,-36A36,36 0 1,0 0,36Z" class="background"></path>
      </g>
    </g>
  </svg>
</div>

You can see a live example here: http://jsfiddle.net/HMQGq/

Can anyone explain what's different about creating the svg via d3 that causes this to happen?

Upvotes: 3

Views: 343

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

The problem is a typo in the attribute definition -- it should be viewBox instead of viewbox.

Upvotes: 1

Related Questions