Javascript 使用XML数据创建堆栈条形图

我正在做一个在线教程（），试图使用xml数据创建堆叠条形图。

这是我正在加载的数据：

这是我的密码：

d3.xml ("data2.xml").then(function (data){

    var parseDate= d3.timeParse("%Y");

    //SETP 1: Setting up chart area variables
    var height= 200;
    var width= 500;
    var margin= {left: 50, right: 50, top:40, bottom: 0};

console.log(data);

xml=[].map.call(data.querySelectorAll("dat"), function(d){

    return {
        date: parseDate(d.getAttribute("id")),
        top: +d.querySelector("top").textContent ,
        middle: +d.querySelector("middle").textContent ,
        bottom: +d.querySelector("bottom").textContent
    };
})
console.log(xml);

    //STEP 2: Define scales
    var minDate = d3.min(data,function(d){ return d.date; });
    var maxDate = d3.max(data,function(d){ return d.date; });
    var x= d3.scaleTime()
             .domain([minDate,maxDate])
             .range([0,width]);
    var y= d3.scaleLinear()
              .domain([0,d3.max(data, function(d){return d.top+d.middle+d.bottom;})])
              .range([height, 0]); 
 
    
     var categories= ['top', 'middle', 'bottom'];         

     //Declaring stack generator
     var stack= d3.stack().keys(categories); 

     //Declaring area generator
     var area= d3.area()
                 .x(function(d){return d;})
                 .y0(function(d){return d;})
                 .y1(function(d){return d;});

    //STEP 2: Setting up chart area
    var svg= d3.select("body").append("svg")
               .attr("width", "100%")
               .attr("height", "100%");

    var chartGroup= svg.append("g") 
                        .attr("transform", "translate("+margin.left+","+margin.top+")"); 
                        
    //Running Stack Generator
    var stacked=stack(xml);   
    console.log(stacked);                 


});

在第2步中，我定义了抛出此错误的刻度：

d3.v6.min.js:2未捕获（承诺中）TypeError:t在stack.js:28的Object.Y[as min]（d3.v6.min.js:2）处不可编辑

---

不确定我做错了什么，或者错误的意思是什么。

根据@charlieftli评论。。。这管用请投票支持他的评论

    var minDate = d3.min(xml,function(d){ return d.date; });
    var maxDate = d3.max(xml,function(d){ return d.date; });
    var x= d3.scaleTime()
             .domain([minDate,maxDate])
             .range([0,width]);
    var y= d3.scaleLinear()
              .domain([0,d3.max(xml, function(d){return d.top+d.middle+d.bottom;})])
              .range([height, 0]); 

---

您想从

xml

array获取minDate&maxDate。当它是一个普通对象数组时，将其称为

xml

会令人困惑