Линейный график из нескольких серий - PullRequest
Новая
       45

Линейный график из нескольких серий

1 голос
/ 11 октября 2019

Я пытаюсь создать многострочный график. Я нашел этот вопрос, который, кажется, делает то же самое, что я пытаюсь сделать, но пример, кажется, не завершен, так как я не могу заставить его работать. Ниже приведен самый минимальный пример, который я мог бы создать, чтобы продемонстрировать, что я пытаюсь сделать, однако он не работает. Он должен создать диаграмму серии линий с двумя сериями, одна для открытия, другая для закрытия. Я попытался использовать тот же принцип, что и в примере таблицы HTML здесь . Я использую d3 версии 5. 

const data = [
  { date: "Wed, 14 Aug 2019 00:00:00 GMT", close: 2.92, open: 3.2 },
  { date: "Wed, 28 Aug 2019 00:00:00 GMT", close: 2.89, open: 2.99 },
  { date: "Fri, 30 Aug 2019 00:00:00 GMT", close: 2.88, open: 3.4 },
  { date: "Mon, 02 Sep 2019 00:00:00 GMT", close: 2.89, open: 3.5 },
];

const margin = { top: 20, right: 20, bottom: 30, left: 50 };
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

// set the ranges
const x = d3
  .scaleTime()
  .domain(d3.extent(data, d => d.date)) 
  .range([0, width]);
const y = d3
  .scaleLinear()
  .domain([0, 4])
  .range([height, 0]);

const g = d3
  .select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

const seriesNames = ["open", "close"]

// create array where each element is a dataset for a specific series
const transformedData = seriesNames.map(colName => data.map(row => ({ date: row.date, value: row[colName] })));

const valueline = d3
  .line()
  .x(d => x(d.date))
  .y(d => y(d.value));

let series = g
  .selectAll("path")
  .data(seriesNames)
  .enter()
  .append("path") // create path for each series
  .data(colName => transformedData[colName]) // bind series-specific dataset to path
  .attr("d", valueline) // create line from series-specific dataset
  .attr("stroke", "red")
  .attr("fill", "none");

// Add the X Axis
g.append("g")
  .attr("transform", `translate(0,${height})`)
  .call(d3.axisBottom(x));

// Add the Y Axis
g.append("g").call(d3.axisLeft(y));

1 Ответ

1 голос
/ 11 октября 2019

Две вещи: во-первых, передайте массив данных непосредственно методу data: 

let series = g
  .selectAll("path")
  .data(transformedData)
  //etc...

Во-вторых, у вас есть шкала времени. Поэтому используйте даты, а не строки: 

data.forEach(d => d.date = new Date(d.date));

Вот ваш код с этими двумя изменениями: 

const data = [{
    date: "Wed, 14 Aug 2019 00:00:00 GMT",
    close: 2.92,
    open: 3.2
  },
  {
    date: "Wed, 28 Aug 2019 00:00:00 GMT",
    close: 2.89,
    open: 2.99
  },
  {
    date: "Fri, 30 Aug 2019 00:00:00 GMT",
    close: 2.88,
    open: 3.4
  },
  {
    date: "Mon, 02 Sep 2019 00:00:00 GMT",
    close: 2.89,
    open: 3.5
  },
];

data.forEach(d => d.date = new Date(d.date));

const margin = {
  top: 20,
  right: 20,
  bottom: 30,
  left: 50
};
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

// set the ranges
const x = d3
  .scaleTime()
  .domain(d3.extent(data, d => d.date))
  .range([0, width]);
const y = d3
  .scaleLinear()
  .domain([0, 4])
  .range([height, 0]);

const g = d3
  .select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

const seriesNames = ["open", "close"]

// create array where each element is a dataset for a specific series
const transformedData = seriesNames.map(colName => data.map(row => ({
  date: row.date,
  value: row[colName]
})));

const valueline = d3
  .line()
  .x(d => x(d.date))
  .y(d => y(d.value));

let series = g
  .selectAll("path")
  .data(transformedData)
  .enter()
  .append("path") // create path for each series
  .attr("d", valueline) // create line from series-specific dataset
  .attr("stroke", "red")
  .attr("fill", "none");

// Add the X Axis
g.append("g")
  .attr("transform", `translate(0,${height})`)
  .call(d3.axisBottom(x));

// Add the Y Axis
g.append("g").call(d3.axisLeft(y));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
...