D3 组件与其他 React 组件重叠

Question

I have this App in React

<div>
        <h1>Spotify Recommendations</h1>
        <div className="App">
          <button class="button" onClick={this.setRecommendations}>
            Log Into Spotify
          </button>
          <Graphs data={this.state.album_count} margin={this.state.topAlbums} />
          <div className="Graphs">
            <Graphs data={this.state.artist_count} margin={this.state.topArtist} />
          </div>
          <p> below are some recommendations based on your listening history </p>
          <div className="App-playlist">
            <RecommendationResults recommendationResults={this.state.recommendations}
                           onAdd={this.addTrack} />

            <Playlist playlistName={this.state.playlistName}
                      playlistTracks={this.state.playlistTracks}
                      onNameChange={this.updatePlaylistName}
                      onRemove={this.removeTrack}
                      onSave={this.savePlaylist} />
          </div>
        </div>
      </div>

I want graphs to display between login button and the playlist components but now they are overlapping with the playlist and really no where near the button.

I suspect that this is a CSS problem, I have tried editing my Apps CSS with no luck

body,
html,
#root {
  height: 100%;
}

html {
  font-size: 18px;
}

h1 {
  padding: .77rem 0;
  background-color: #010c3f;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 1.88rem;
  color: #fff;
}

h1 .highlight {
  color: #6c41ec;
}

h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.55rem;
}

.App {
  height: 100%;
  padding: 0 17% 10% 17%;
  background-color: teal;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  color: #fff;
}


.App-playlist {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.Graphs{

}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

.button{
  cursor: pointer;
  width: 8.11rem;
  padding: .77rem 0;
  border-radius: 54px;
  background-color: #010c3f;
  text-align: center;
  font-size: .833rem;
  transition: background-color .25s;
  border: 0px;
  color: #fff;
  font-weight: 500;
}

media only screen and (max-width: 1020px) {
  .App-playlist {
    align-items: center;
    flex-direction: column;
  }
}

and here is my D3 component and currently have no CSS attached to this

import React from 'react';
//import {Spotify, findUnique} from '../../utils/Spotify';
import * as d3 from "d3";

class Graphs extends React.Component {
  componentDidMount() {
    this.drawChart();
  }

  drawChart() {
    const data = this.props.data;
    const margin = this.props.margins;
    const h = 300;
    const w = 700;

    const svg = d3.select("body")
    .append("svg")
    .attr("width", 700)
    .attr("height", 300)
    .style("margin-left", 300);

    svg.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", (d, i) => i * 70)
      .attr("y", (d, i) => h - (5 * d) - 15)
      .attr("width", 65)
      .attr("height", (d, i) => d * 5)
      .attr("fill", "blue");

    svg.selectAll("text")
      .data(data)
      .enter()
      .append("text")
      .text((margin) => margin)
      .attr("x", (d, i) => i * 70)
      .attr("y", (d, i) => h)
  }

    render(){
      return <div id={"#" + this.props.id} ></div>
    }
}
export default Graphs

Answer 1

I think this is because you are trying to select body tag and append a svg to the body. Instead try selecting the div.

const svg = d3.select(`#${this.props.graphId}`)
.append("svg")
.attr("width", 700)
.attr("height", 300)
.style("margin-left", 300);

Render function

render(){
  return <div id={"#" + this.props.graphId} />
}

In JSX part

  <Graphs data={this.state.album_count} margin={this.state.topAlbums} graphId={'someid'} />