Databases
StackOverflow2013
Postsdbo
POresponsive d3 area graph stretches circle interaction points
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POresponsive d3 area graph stretches circle interaction points
    primarykey
    data
    text
    <p>I have been experimenting with a simple <strong>d3</strong> google analytics-style area graph demo. I'd like to make it stretch to the full width of its container, which I have managed to do. However the little circles are of course stretching out of shape too. I'd like their positions to be responsive, but not their dimensions (so they remain circular).</p> <p>Fiddle link: <a href="http://jsfiddle.net/46PfK/2/" rel="nofollow">http://jsfiddle.net/46PfK/2/</a></p> <p>I'm trying to use the <a href="http://phrogz.net/svg/libraries/SVGPanUnscale.js" rel="nofollow">SVGPanUnscale.js</a> script. I have tried calling it with <code>unscaleEach('.dot');</code> and <code>[].forEach.call($('.dot'),unscale);</code> but neither appear to do anything.</p> <p>This example is responsive in a similar way to mine and uses the script to 'unscale' the axis labels: <a href="http://meloncholy.com/static/demos/responsive-svg-graph-1/" rel="nofollow">http://meloncholy.com/static/demos/responsive-svg-graph-1/</a></p> <p>This example also uses circle elements: <a href="http://phrogz.net/svg/scale-independent-elements.svg" rel="nofollow">http://phrogz.net/svg/scale-independent-elements.svg</a></p> <p>I looked at solutions involving the css attribute:</p> <pre><code>circle { vector-effect: non-scaling-stroke; } </code></pre> <p>which created a circular stroke on an ellipse - weird.</p> <p>A CSS solution would be preferable to a JS one, provided it works across browsers.</p> <p>Any suggestions?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USdaviestar
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POresponsive d3 area graph stretches circle interaction points
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POresponsive d3 area graph stretches circle interaction points
      1. This table or related slice is empty.
      1. VTUpMod
    1. COsorry, updated fiddle link
      singulars
      1. POresponsive d3 area graph stretches circle interaction points
      1. USdaviestar
    2. CONot sure what you exactly need. Is something like this : http://jsfiddle.net/46PfK/3/ already enough, or do you need a real responsive solution (where you consider user can resize windows?). Anyway, I don't think there is a css solution, at least not as long as your circle are in the same svg element. You could create 2 groups in your svg, rescale only the group with your blue graph, and update the scale (only horizontal?) to display your circles at the right place).
      singulars
      1. POresponsive d3 area graph stretches circle interaction points
      1. USleMoisela
    3. CO@leMoisela My solution above should scale on window resize (at least in Chrome anyway). I'm trying to use this graph in a web app, so it needs to scale horizontally as the user changes orientation. I think you're right though, some JS to redraw the graph on resize might be the best way to go.
      singulars
      1. POresponsive d3 area graph stretches circle interaction points
      1. USdaviestar
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload