title: Argument of type 'string | null' is not assignable to parameter of type 'ValueFn<SVGPathElement, Datum[], string | number | boolean | null>'
body: <p>I am new to d3 and tried to implement a minimal line chart using d3, TypeScript and react. But it will always result in a TypeScript error. I even see my chart for a split second before it gets replaced by the error message.</p>
  
  <p>I separated the d3 part from the react code as much as possible. There is a react component that renders a <code>div</code> with an <code>id</code> and at <code>componentDidUpdate</code> the <code>id</code> gets passed to a <code>draw</code> function in a separate file with all my d3 code (code below).
  I tried to provide a type for everything that can be typed.</p>
  
  <pre><code>import * as d3 from 'd3'
  
  type Props = { id: string }
  type Datum = {x: number, y: number}
  type Data = Array&lt;Datum&gt;
  
  const draw = (props: Props) =&gt; {
      const data = [
          { x: 1, y: 5 },
          { x: 20, y: 20 },
          { x: 40, y: 10 },
          { x: 60, y: 40 },
          { x: 80, y: 5 },
          { x: 100, y: 60 },
      ]
      const container = d3.select&lt;HTMLElement, any&gt;('#' + props.id)
      container.selectAll&lt;HTMLElement, any&gt;('*').remove()
      const svg = container.append&lt;SVGElement&gt;('svg')
      const lineGenerator = d3.line&lt;Datum&gt;()
          .x((d: Datum) =&gt; d.x)
          .y((d: Datum) =&gt; d.y)
  
      svg.append&lt;SVGPathElement&gt;('path')
          .datum&lt;Data&gt;(data)
          .attr('fill', 'none')
          .attr('stroke', 'steelblue')
          .attr('stroke-width', 1.5)
          .attr('d', lineGenerator(data))
  }
  
  export default draw
  </code></pre>
  
  <p>Like I said, the chart is visible but quickly disappears and instead I get:</p>
  
  <blockquote>
    <p>...<br /> TypeScript error in ... :<br />
    Argument of type 'string | null' is not assignable to parameter of
    type 'ValueFn&lt;SVGPathElement, Datum[], string | number | boolean |
    null>'.<br />&nbsp; &nbsp; &nbsp; Type 'null' is not assignable to type
    'ValueFn&lt;SVGPathElement, Datum[], string | number | boolean | null>'. 
    TS2345</p>
  
  <pre><code>    26 |         .attr('stroke', 'steelblue')
      27 |         .attr('stroke-width', 1.5)
    &gt; 28 |         .attr('d', lineGenerator(data))
         |                    ^
      29 | }
      30 | 
      31 | export default draw
  </code></pre>
  </blockquote>
  
  <p>Any ideas where the <code>argument of type string | null</code> comes from and how to fix that error?</p>
  
  <p>EDIT: Since it turned out not to be related to the problem, I removed the react code for the sake of clarity.</p>