我在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>
我希望图形显示在登录按钮和播放列表组件之间,但是现在它们与播放列表重叠,并且实际上在按钮附近没有显示。
我怀疑这是CSS问题,我尝试编辑我的Apps CSS时遇到了麻烦
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;
}
}
这是我的D3组件,目前没有附加CSS
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
答案 0 :(得分:0)
我认为这是因为您正在尝试选择body标签并将svg附加到body。而是尝试选择div。
const svg = d3.select(`#${this.props.graphId}`)
.append("svg")
.attr("width", 700)
.attr("height", 300)
.style("margin-left", 300);
渲染功能
render(){
return <div id={"#" + this.props.graphId} />
}
在JSX部分
<Graphs data={this.state.album_count} margin={this.state.topAlbums} graphId={'someid'} />