在 SVG 元素中使用类似对象（节点列表）的数组 - d3 Javascript

Question

我对 java 脚本很陌生，并且在我的仪表板开发中使用 d3 库。我正在尝试开发一个散点图，其中 y 轴为值，x 轴为时间。

我有数据存储在数组中，格式（节点列表）如下（PFA）enter image description here，

data = [
0: {value:"2351", date:"5/12/2019 6:06:06 AM", type: "3"}
1: {value: "2670", date: "5/12/2019 6:06:07 AM", type: "2"}
2: {value: "2670", date: "5/12/2019 6:06:07 AM", type: "2"}
] 

我想传递这些数据来绘制散点图，我使用的代码如下，

d3.csv("data.csv", function(error, data) {

data = processedData;

var parser = d3.timeParse("%d-%m-%Y %H:%M:%S");  

data.date = parser(data.date); 

debugger;


//data.date = parser(data.date);

  // Add X axis --> it is a date format
    var x = d3.scaleTime()
      .domain(d3.extent(data, function(d) { return parser(d.date); }))
      .range([ 0, width ]);
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).ticks(15));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain([1200, d3.max(data, function(d) { return +d.value; })])
      .range([ height, 0 ]);
    svg.append("g")
      .call(d3.axisLeft(y));
    // Color scale: give me a specie name, I return a color
    var color = d3.scaleOrdinal()
      .domain(["1", "2", "3", "4" ])
      .range([ "#402D54", "#D18975", "#8FD175", "#69b3a2"]);

      // Add dots
    svg.append('g')
      .selectAll("dot")
      .data(data)
      .enter()
      .append("circle")
        .attr("cx", function (d) { return x(parser(d.date)); } )
        .attr("cy", function (d) { return y(d.value); } )
        .attr("r", 1.3)
        .style("fill", function (d) { return color(d.type); });


});

运行此脚本时，图表未按预期绘制。我想问题是，在 svg 元素中，我试图使用 d.date 函数来调用它的值。但在节点列表中，此功能不起作用。谁能建议我如何将上述节点列表数据转换为数组并在我的 svg 元素中使用它。

Answer 1

您的说明符不正确。鉴于您的日期字符串结构 ("5/12/2019 6:06:06 AM")，它应该是：

var parser = d3.timeParse("%d/%m/%Y %I:%M:%S %p");

PS：除了那个主要问题之外，您还有边距问题，特别是在平移轴时。我建议您设置边距（顶部、底部、左侧和右侧），然后相应地更改比例和轴组。