Is there a way to keep aspect ratio fixed for text but not other svg elements?

StackOverflow https://stackoverflow.com/questions/8945245

  •  07-11-2019
  •  | 
  •  

سؤال

I have a d3.js graph that is made up of rects, and I'd like this to be resizable to any aspect ratio. I've made this work by adding a this code:

    var canvas = d3.select("#graph-canvas").append("svg:svg")
      .attr("viewBox", "0 0 " + viewWidth + " " + viewHeight)
      .attr("preserveAspectRatio", "none")

But the problem I'm having is that I don't want the text to stretch along with it. I'd actually like the text to remain a constant size, while it's position adjusts to move with the dimensions of the chart. But if the text can't remain a constant size, I'd like for it to at least retain its aspect ratio.

I've tried setting the aspect ratio on the text element, but this doesn't work (I think it's an attribute meant for a viewBox.

    canvas.append("svg:text")
      .attr("x", function(d, i) {return xScale(i) + marginLeft;})
      .attr("y", "200")
      .attr("preserveAspectRatio", "xMinYMin")
      .attr("font-size", "100")
      .text("foo");

I've also tried attaching just normal divs, but for some reason they never show up.. Thinking this might be the right strategy though.

لا يوجد حل صحيح

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top