CODEWITHSUNDEEP
typescriptd3.js
kluzix
kluzix

Reputation: 11

d3.js this.parent node returns some typescript error

I am typescript with d3.js , I created the graph that shows data,black rectangles their height depends on number i get from generateData with is any number bigger than 0.For this data i want to on hover show the number coresponding number for this rectangle.Problem is i getting error from typescript

No overload matches this call. Overload 1 of 2, '(selector: string): Selection<BaseType, unknown, HTMLElement, any>', gave the following error. Argument of type 'ParentNode | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. Overload 2 of 2, '(node: BaseType): Selection<BaseType, unknown, null, undefined>', gave the following error. Argument of type 'ParentNode | null' is not assignable to parameter of type 'BaseType'. Type 'ParentNode' is not assignable to type 'BaseType'. Type 'ParentNode' is missing the following properties from type 'Document': URL, alinkColor, all, anchors, and 191 more.ts(2769)

This is the code i wrote so far:

     const data = generateData(50);

     const margin = { top: 10, right: 30, bottom: 30, left: 40 },
     width = 800 - margin.left - margin.right,
     height = 400 - margin.top - margin.bottom;


     const svg = d3
        .select(".visualization")
         .append("svg")
         .attr("width", width + margin.left + margin.right)
         .attr("height", height + margin.top + margin.bottom)
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

     const rects = svg.selectAll("rect").data(data).enter().append("rect");

    rects
      .attr("x", (_, i) => i * (width / data.length))
      .attr("y", (d) => height - d)
      .attr("width", () => width / data.length - 1)
      .attr("height", (d) => d)
      .on("mouseover", function (d, i) {
        d3.select(this.parentNode).append("text").text(d);
       });

    export {};

Upvotes: 1

Views: 367

Answers (1)

weedman
weedman

Reputation: 1

You may use:

(event, d) => d3.select(event.target.parentNode).append("text").text(d)

Upvotes: -2

Related Questions