javascript - 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;

提前致谢

标签： javascriptcssreactjsd3.jssvg

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)");