D3 - Achsen mit Prozentskala einstellen

Question

Ich versuche ein Streudiagramm zu erstellen, wobei die Abmessungen des angehängten svg-Elements in Prozent angegeben werden (also etwa 50 oder 100% des Bildschirms anstelle der X-Pixel).

Dann möchte ich das svg Element mit Kreisen, deren Positionen füllen skaliert in als prozentualer Wert zwischen 0 und 100 und eingestellt sein als auch, wie so: .attr('cx', function(d){return xScale(d[0]) + '%'})

Dieser Ansatz für die Festlegung der Kreis Positionen arbeitet, aber ich kann die korrekte Skalierung der Achsen nicht erreichen. Ich denke, sie werden über das transform-Element gesetzt, und das will nicht % als Teil eines Arguments nehmen.

Siehe js Geige hier mit einem vollständigen Beispiel: https://jsfiddle.net/s01pg3fa/5/

Die Achsen werden nicht richtig skaliert das gesamte svg Element auszufüllen. Danke für jede Eingabe.

Answer 1

Sie können die Client Größe des svg bekommen und es in der Achsenskalierung verwenden:

var svgClientSize = svg.node().getBoundingClientRect(); 

es auf der Achse Skalen:

var xScale = d3.scaleLinear() 
      .domain([0, d3.max(data, function(d){return d[0]})]) 
      .range([padding,svgClientSize.width-padding]) 
var yScale = d3.scaleLinear() 
      .domain([0, d3.max(data, function(d){return d[1]})]) 
      .range([svgClientSize.height-padding,padding]) 

In diesem Fall brauchen Sie nicht die ‚%‘ für die Kreise ist

Hier die aktualisierte js Geige: https://jsfiddle.net/q7xm8n73/1/