Объект d3.js не отображается полностью с картой

Question

Я новичок в d3 и в настоящее время следую учебному пособию от FreeCodeCamp.

По сути, я хочу сделать несколько кругов в начальной загрузочной карточке, но, кажется, она падает с карты слева, а также обрезается справа.

import { Component } from "react";
import "./App.css";
import * as d3 from "d3";

class Process extends Component {
  constructor(props) {
    super(props);
    this.createProcess = this.createProcess.bind(this);
  }
  componentDidMount() {
    this.createProcess();
    this.drawProcess();
  }
  componentDidUpdate() {
    this.drawProcess();
  }

  drawProcess() {
    const width = +this.svg.attr("width");
    const height = +this.svg.attr("height");

    const makeFruit = test => {
      return test;
    };

    const fruits = d3.range(10).map(() => makeFruit("apple"));

    this.svg
      .selectAll("circle")
      .data(fruits)
      .enter()
      .append("circle")
      .attr("cx", (d, i) => i * 120 + 60)
      .attr("fill", "orange")
      .attr("cy", height / 2)
      .attr("r", 50);

    fruits.pop();
    this.svg
      .selectAll("circle")
      .data("fruits")
      .exit()
      .remove();
  }

  createProcess() {
    this.svg = d3
      .selectAll("#flowView")
      .append("svg")
      .attr("width", "100%");
  }

  render() {
    return null;
  }
}
export default Process;

Заранее спасибо

Answer 1

Вам просто нужно translate круги. Добавьте эту строку к circles.

.attr("transform", "translate(0,75)")

. Это переведет круги 75px вниз.

this.svg
  .selectAll("circle")
  .data(fruits)
  .enter()
  .append("circle")
  .attr("cx", (d, i) => i * 120 + 60)
  .attr("fill", "orange")
  .attr("cy", height / 2)
  .attr("r", 50)
  .attr("transform", "translate(0,75)");