используя массив как объект (список узлов) с элементом SVG - d3 Java Script - PullRequest
Новая
       60

используя массив как объект (список узлов) с элементом SVG - d3 Java Script

0 голосов
/ 24 февраля 2020

Я довольно новичок в скрипте java и использую библиотеку d3 для разработки своей панели. Я пытаюсь разработать график рассеяния со значениями по оси Y и время по оси X.

У меня есть данные, хранящиеся в формате, подобном массиву (список узлов), следующим образом (PFA) введите описание изображения здесь , 

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"}
]

Я хочу передать эти данные plot scatter plot, для которого я использую код следующим образом: 

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.

1 Ответ

1 голос
/ 24 февраля 2020

Ваш спецификатор неверен. Учитывая вашу структуру строки даты ("5/12/2019 6:06:06 AM"), она должна быть: 

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

PS: Помимо этой основной проблемы, у вас есть проблема с полями, особенно при перемещении осей. Я предлагаю вам установить поля (сверху, снизу, слева и справа), а затем соответственно изменить шкалы и группы осей.

...