title: I have created a line Chart using d3.js in React. Need to do some customizations on it and not sure how to do. Please see the description and code
body: <p>I need to create a line chart using React and D3 as shown below.
  <a href="https://i.stack.imgur.com/xqvB0.png" rel="nofollow noreferrer">The line chart i need to create</a></p>
  
  <p>I already have this chart with the code i have written
  <a href="https://i.stack.imgur.com/pNOBI.png" rel="nofollow noreferrer">Line chart till now</a></p>
  
  <p>The code till now is -</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  import * as d3 from "d3";
  
  const width = 400;
  const height = 350;
  const margin = { top: 20, right: 8, bottom: 20, left: 35 };
  
  class LineChart extends Component {
    state = {
      line: []
    };
  
    xAxis = d3.axisBottom();
    yAxis = d3.axisLeft();
  
    static getDerivedStateFromProps(nextProps, prevState) {
      const { data } = nextProps;
      console.log("test", data);
      if (!data) return {};
  
      const yScale = d3.scaleLinear().range([height - margin.bottom, margin.top]);
  
      const xScale = d3
        .scaleBand()
        .domain(data.map(d =&gt; d.price))
        .range([margin.left, width - margin.right])
        .padding(1);
  
      // set domains on the scales
      const demandMax = d3.extent(data, d =&gt; d.demand);
      const priceMax = d3.extent(data, d =&gt; d.price);
      yScale.domain(demandMax);
  
      const lineGenerator = d3
        .line()
        .x(d =&gt; xScale(d.price))
        .y(d =&gt; yScale(d.demand));
  
      const line = [
        {
          fill: "none",
          path: lineGenerator(data),
          stroke: "steelblue"
        }
      ];
  
      return { line, xScale, yScale, data };
    }
  
    componentDidUpdate() {
      this.xAxis.scale(this.state.xScale);
      d3.select(this.refs.xAxis).call(this.xAxis);
      this.yAxis.scale(this.state.yScale);
      d3.select(this.refs.yAxis).call(this.yAxis);
    }
  
    render() {
      console.log(this.state.line);
      console.log(this.state.data);
      return (
        &lt;svg width={width} height={height}&gt;
          {this.state.line.map((d, i) =&gt; (
            &lt;path key={i} d={d.path} stroke={d.stroke} fill={d.fill} /&gt;
          ))}
          &lt;g ref="xAxis" transform={`translate(0, ${height - margin.bottom})`} /&gt;
          &lt;g ref="yAxis" transform={`translate(${margin.left}, 0)`} /&gt;
        &lt;/svg&gt;
      );
    }
  }
  
  export default LineChart;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now i need to add functionality that circles come around all the points and intitially there is area with dotted lines for one of the points with values displayed inside the rectangle. then when user hovers over other point the dotted lines corresponds to that points. How can i achieve this functionality using d3 in react. I am unable to come up with a solution? </p>