Блог

Главная - Вопросы по программированию - D3.js можно ли нарисовать круги в каждой точке, используя вложенные данные?

D3.js можно ли нарисовать круги в каждой точке, используя вложенные данные?

#javascript #d3.js

#javascript #d3.js

Вопрос:

У меня есть график, который мне нужно отобразить, который имеет несколько строк. Есть отдельные точки и линия, которая проходит через них. В каждой точке я хочу нарисовать круг. Для строк я использую функцию d3.nest(), которая преобразует csv-файл в массив данных, который является вложенным, используя предоставленный мной ключ, и для рисования кругов в каждой точке я просто использую необработанный массив «данных». Что я хочу знать, так это то, есть ли способ построить круги по точкам, используя ВЛОЖЕННЫЙ массив в качестве входных данных? или я ДОЛЖЕН использовать файл необработанных данных для рисования кругов в каждой точке? введите описание изображения здесь

Комментарии:

1. Пожалуйста, поделитесь некоторым кодом того, что ypu делает в настоящее время, чтобы мы могли лучше направлять вас.

Ответ №1:

Конечно, это возможно. Если вы создадите одну «группу» для каждой группы в своем наборе вложенных данных, то вы сможете нарисовать одну линию для каждой из этих групп, а также по одному кругу для каждой из точек в каждой из групп. Взгляните на следующее:

 const fruits = ["Apples", "Oranges", "Bananas"];
const colors = ["red", "orange", "yellowgreen"];
const rawData = fruits.map((obj, f) => {
  let v = 1;
  return d3.range(30).map(i => ({
    fruit: f,
    index: i,
    value: v *= (0.95   Math.random() * 0.1)
  }));
}).flat();

const nestedData = d3.nest()
  .key(d => d.fruit)
  .entries(rawData);

const width = 800,
  height = 200;

const x = d3.scaleLinear()
  .domain([0, 29])
  .range([0, width]);

const y = d3.scaleLinear()
  .domain(d3.extent(rawData, d => d.value))
  .range([height, 0])
  .nice();

const color = d3.scaleOrdinal()
  .domain(fruits)
  .range(colors);

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

const svg = d3.select("svg")
  .attr("width", width)
  .attr("height", height);

const lineGroup = svg.selectAll(".line-group")
  .data(nestedData)
  .enter()
  .append("g")
  .attr("class", "line-group");

lineGroup.append("path")
  .datum(d => d.values)
  .attr("class", "line")
  .attr("stroke", d => color(d[0].fruit))
  .attr("d", line);

lineGroup.selectAll("circle")
  .data(d => d.values)
  .enter()
  .append("circle")
  .attr("class", "dot")
  .attr("stroke", d => color(d.fruit))
  .attr("r", 5)
  .attr("cx", d => x(d.index))
  .attr("cy", d => y(d.value));  
 .line {
  fill: none;
  stroke-width: 2px;
}

.dot {
  stroke-width: 2px;
  fill: white;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>