javascript - D3.js Brush and Zoom line chart Error: attribute d: Expected number

Question

I'm working on a line chart with zoom and brush base on https://bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f

I'm having an errors 1

This is my code base:

var margin = { top: 20, right: 20, bottom: 110, left: 40 },
  margin2 = { top: 430, right: 20, bottom: 30, left: 40 },
  width = 950 - margin.left - margin.right,
  height = 600 - margin.top - margin.bottom,
  height2 = 600 - margin2.top - margin2.bottom;

var svg = d3
  .select(this.shadowRoot.querySelector("#my_dataviz"))
  .append("svg")
  .attr("id", "svgTrending")
  .attr("width", width)
  .attr("height", height);

dataChart.forEach(function (d) {
  d = type(d);
});

var parseDate = d3.timeParse("%m/%d/%Y %H:%M");

var x = d3.scaleTime().range([0, width]),
  x2 = d3.scaleTime().range([0, width]),
  y = d3.scaleLinear().range([height, 0]),
  y2 = d3.scaleLinear().range([height2, 0]);

var xAxis = d3.axisBottom(x),
  xAxis2 = d3.axisBottom(x2),
  yAxis = d3.axisLeft(y);

var brush = d3
  .brushX()
  .extent([
    [0, 0],
    [width, height2],
  ])
  .on("brush end", brushed);

var zoom = d3
  .zoom()
  .scaleExtent([1, Infinity])
  .translateExtent([
    [0, 0],
    [width, height],
  ])
  .extent([
    [0, 0],
    [width, height],
  ])
  .on("zoom", zoomed);

var clip = svg
  .append("defs")
  .append("svg:clipPath")
  .attr("id", "clip")
  .append("svg:rect")
  .attr("width", width)
  .attr("height", height)
  .attr("x", 0)
  .attr("y", 0);

var Line_chart = svg
  .append("g")
  .attr("class", "focus")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .attr("clip-path", "url(#clip)");

var focus = svg
  .append("g")
  .attr("class", "focus")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var context = svg
  .append("g")
  .attr("class", "context")
  .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

x.domain(
  d3.extent(dataChart, function (d) {
    return d.date;
  })
);
y.domain([
  0,
  d3.max(dataChart, function (d) {
    if (
      that.normalizedChartData.max_value_on_hand >
      that.normalizedChartData.max_value_doi
    ) {return d.lineValue[0].value;}
    else return d.lineValue[1].value;
  }),
]);
x2.domain(x.domain());
y2.domain(y.domain());

focus
  .append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

focus.append("g").attr("class", "axis axis--y").call(yAxis);

const arrLine = dataChart[0].lineValue;

for (let i = 0; i < arrLine.length; i++) {

  Line_chart.append("path")
    .datum(dataChart)
    .attr("class", "line")
    .attr("d", d3
      .line()
      .x(function (d) {
        return x(d.date);
      })
      .y(function (d) {
        return y(d.lineValue[i].value);
      })
    );

  context
    .append("path")
    .datum(dataChart)
    .attr("class", "line")
    .attr("d", d3
      .line()
      .x(function (d) {
        return x2(d.date);
      })
      .y(function (d) {
        return y2(d.lineValue[i].value);
      })
    );

  context
    .append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height2 + ")")
    .call(xAxis2);

  context
    .append("g")
    .attr("class", "brush")
    .call(brush)
    .call(brush.move, x.range());

  svg
    .append("rect")
    .attr("class", "zoom")
    .attr("width", width)
    .attr("height", height)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(zoom);
}

function brushed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
  var s = d3.event.selection || x2.range();
  x.domain(s.map(x2.invert, x2));
  Line_chart.select(".line").attr("d", line);
  focus.select(".axis--x").call(xAxis);
  svg
    .select(".zoom")
    .call(
      zoom.transform,
      d3.zoomIdentity.scale(width / (s[1] - s[0])).translate(-s[0], 0)
    );
}

function zoomed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
  var t = d3.event.transform;
  x.domain(t.rescaleX(x2).domain());
  Line_chart.select(".line").attr("d", line);
  focus.select(".axis--x").call(xAxis);
  context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}

function type(d) {
  var parse = d3.timeFormat("%m/%d/%Y %H:%M");
  d.date = parse(new Date(d.date));
  return d;
}

An this is my response data:

{
  data: [
{date: 1626739200000, lineValue: [{name: "On Hand", value: 155750}, {name: "14 DOI", value: 52173.35}
{date: 1626739200000, lineValue: [{name: "On Hand", value: 155750}, {name: "14 DOI", value: 52173.35}]
]
end_date: 1629072000000
max_value_doi: 54180.02
max_value_on_hand: 180384
start_date: 1626739200000
years: "2021-2021"
}

I have format the date and value inside the response through type function but I still get the errors. What am I doing wrong here ?

标签： javascriptd3.js