Javascript D3组分与其他反应组分重叠

我有这个应用程序

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

这是我的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

---

我认为这是因为您试图选择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'} />

---

我认为这是因为您试图选择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'} />

---

谢谢，但是当我这样做的时候，我的图表不会显示在任何地方。我不确定是否有错误没有被发现，或者其他组件是否正在掩盖它。与之相反，它与其他组件重叠。更新我刚刚使用了Inspect元素，它正在发布div，但内部没有SVG。实际上，您正试图将SVG内部的BODY标记附加到not div。这就是我要求您将select函数更改为select div的id的原因。此组件内没有BODY标记。这可能就是为什么在检查内部DIV时没有显示SVG的原因。我根据您的建议更改了select函数。这些图表没有显示出来。我看了一下inspect元素，里面有一个新的元素，我把组件放在里面，但是在divs代码中没有svg:const svg=d3。选择`${this.props.graphID}`并返回调用：inspect元素：我找到了它。问题是selectid\u name在HTML中的某个地方查找id\u name。它找不到id_名称，因为在渲染中我们返回了id_名称从渲染中删除解决了问题，现在它显示在正确的位置。谢谢，但当我这样做时，我的图形不会显示在任何地方。我不确定是否有错误没有被发现，或者其他组件是否正在掩盖它。与之相反，它与其他组件重叠。更新我刚刚使用了Inspect元素，它正在发布div，但内部没有SVG。实际上，您正试图将SVG内部的BODY标记附加到not div。这就是我要求您将select函数更改为select div的id的原因。此组件内没有BODY标记。这可能就是为什么在检查内部DIV时没有显示SVG的原因。我根据您的建议更改了select函数。这些图表没有显示出来。我看了一下inspect元素，里面有一个新的元素，我把组件放在里面，但是在divs代码中没有svg:const svg=d3。选择`${this.props.graphID}`并返回调用：inspect元素：我找到了它。问题是selectid\u name在HTML中的某个地方查找id\u name。它找不到id_名称，因为在渲染中我们返回了id_名称从渲染中删除解决了问题，现在它显示在正确的位置。