multiple histogram bug fix

1 files changed, 6 insertions, 6 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 1da803076..14063a068 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -4,10 +4,8 @@ import * as React from 'react';
 import * as d3 from 'd3';
 import { IReactionDisposer, action, computed, observable, reaction } from "mobx";
 import { LinkManager } from "../../../../util/LinkManager";
-import { Cast, DocCast, StrCast } from "../../../../../fields/Types";
-import { useMemo } from "react";
+import { Cast, DocCast} from "../../../../../fields/Types";
 import { DataPoint, SelectedDataPoint } from "./LineChart";
-import { createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from "../utils/D3Utils";
 import { DocumentManager } from "../../../../util/DocumentManager";
 import { Id } from "../../../../../fields/FieldSymbols";
 import { DataVizBox } from "../DataVizBox";
@@ -16,7 +14,6 @@ import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
 import './Chart.scss';
-import { isNaN } from "lodash";
 
 export interface HistogramProps {
     rootDoc: Doc;
@@ -227,6 +224,8 @@ export class Histogram extends React.Component<HistogramProps> {
     }
 
     drawChart = (dataSet: any, width: number, height: number) => {
+        d3.select(this._histogramRef.current).select('svg').remove();
+        d3.select(this._histogramRef.current).select('.tooltip').remove();
 
         var validData = dataSet.filter((d: { [x: string]: unknown; }) => {
             var valid = true;
@@ -245,14 +244,15 @@ export class Histogram extends React.Component<HistogramProps> {
         var numBins = uniqueArr.length
         if (+d3.max(data)!) numBins = +d3.max(data)!
 
-        const svg = d3.select(this._histogramRef.current)
+        const svg = (this._histogramSvg = d3
+            .select(this._histogramRef.current)
             .append("svg")
                 .attr("class", "graph")
                 .attr("width", width + this.props.margin.right + this.props.margin.left)
                 .attr("height", height + this.props.margin.top + this.props.margin.bottom)
             .append("g")
                 .attr("transform",
-                      "translate(" + this.props.margin.left + "," + this.props.margin.top + ")");
+                      "translate(" + this.props.margin.left + "," + this.props.margin.top + ")"));
 
         var x = d3.scaleLinear()
             .domain([0, numBins])