Próbuję nam d3 wewnątrz aplikacji railsów.

Istnieją inne elementy, które nie są częścią wizualizacji, zajmujące miejsce u góry i po lewej stronie strony.

Mój problem polega na tym, że kiedy ustawiam (x, y) do dowolnego elementu svg, wydaje się, że robię to na podstawie body strony, a nie svg. Czy to typowe? Czy istnieje sposób, w jaki zawsze mogę ustawić pozycję z (0,0) pozycji svg, w lewym górnym rogu?

Wybieram element, dołączam tag svg i g, a następnie text Wydaje mi się, że spodziewałem się, ponieważ wszystko było dołączane, zostanie umieszczone z / pozycjonowane w swoim nadrzędnym.

Przykład:

var g = d3.select("#chart-area").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
g.append("text")
  .attr("class", "x axis-label")
  .attr("x", width / 2)
  .attr("y", height + 75)
  .attr("font-size", "20px")
  .attr("text-anchor", "middle")
  .text("Months")

W rezultacie etykieta pojawi się pod interfejsem klejnotu.

To nie jest rzeczywisty projekt, to samouczek, ale używam w zasadzie tego samego kodu: https://jsfiddle.net/r6jkht9v/1/

0
user3738936 1 wrzesień 2020, 15:19

2 odpowiedzi

Najlepsza odpowiedź

Moje rozwiązanie polegało głównie na dodaniu kilku tagów bootstrap.

<div class="container">
        <div class="row">
          d3
        </div>
</div>

Po dodaniu tych elementów svg, które dołączyłem, pozostałem w svg.

0
user3738936 1 wrzesień 2020, 14:22

Jeśli chcesz dołączyć elementy z lewego górnego rogu, nie musisz ich przekształcać. Użyj poniższego kodu:

var g = d3.select("#chart-area").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
0
PrinceIsNinja 1 wrzesień 2020, 16:19