you can’t put circles on a multi-line chart d3

Question

Firstly, your problem is that for a line, you pass an array of data points, but fir a circle, you pass a single data point. Simply applying console.log(circleData) tells me that circleData is an array of arrays.

There are multiple ways to make your code work. One is just to flatten all circle data points into a single array, using circleData.flat(). The upside is that it is by far the simplest solution. The downside is that you use (d, i) => colorScale(i), and i is now messed up.

//No.6 append circles
let circleData = data.map((i) => i.values).flat();
mainGraph
  .selectAll("circle")
  .data(circleData)
  .enter()
  .append("circle")
  .attrs({
    cx: (d) => xScale(d.name),
    cy: (d) => yScale(d.value),
    r: 3,
    opacity: 1,
  });

For lines, i becomes 0 for line 1, 1 for line 2, etc. For the circles, we’d want it to become 0 five times, and 1 five times, but instead it becomes 0, 1, 2, ..., 10. Because that’s what counters do, they count.

You could change the data by adding a property that tells you which line a circle belongs to, or you could lean into it and put all circles that depend on a line into a single g-element. That means appending a g for each line/circle combination.

It has some upsides. One is that fill can be inherited from that g element, so you can keep using colorScape(i). Another is that you could even move the line into the group, giving you a very easy way to highlight, show/hide, or do other things to it.

const data = [{
  category: "series_1",
  values: [{
      name: "A",
      value: 10
    },
    {
      name: "B",
      value: 21
    },
    {
      name: "C",
      value: 19
    },
    {
      name: "D",
      value: 23
    },
    {
      name: "E",
      value: 20
    },
  ],
}, ];
let counter = 1;
const add_set = (arr) => {
  let copy = JSON.parse(JSON.stringify(arr[0]));
  const random = () => Math.floor(Math.random() * 20 + 1);
  const add = (arr) => {
    counter++;
    copy.values.map((i) => (i.value = random()));
    copy.category = `series_${counter}`;
    arr.push(copy);
  };
  add(arr);
};
add_set(data);

//No.1 define the svg
let graphWidth = 600,
  graphHeight = 300;
let margin = {
  top: 60,
  right: 10,
  bottom: 30,
  left: 45
};
let totalWidth = graphWidth + margin.left + margin.right,
  totalHeight = graphHeight + margin.top + margin.bottom;
let svg = d3
  .select("body")
  .append("svg")
  .attr("width", totalWidth)
  .attr("height", totalHeight);
//No.2 define mainGraph
let mainGraph = svg
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//No.3 define axises
let categoriesNames = data[0].values.map((d) => d.name);
let xScale = d3
  .scalePoint()
  .domain(categoriesNames)
  .range([0, graphWidth]); // scalepoint make the axis starts with value compared with scaleBand
let colorScale = d3.scaleOrdinal(d3.schemeCategory10);
colorScale.domain(data.map((d) => d.category));

let yScale = d3
  .scaleLinear()
  .range([graphHeight, 0])
  .domain([
    d3.min(data, (i) => d3.min(i.values, (x) => x.value)),
    d3.max(data, (i) => d3.max(i.values, (x) => x.value)),
  ]); //* If an arrow function is simply returning a single line of code, you can omit the statement brackets and the return keyword

//No.4 set axises
mainGraph
  .append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + graphHeight + ")")
  .call(d3.axisBottom(xScale));
mainGraph.append("g").attr("class", "y axis").call(d3.axisLeft(yScale));
//No.5 make lines
let lineGenerator = d3
  .line()
  .x((d) => xScale(d.name))
  .y((d) => yScale(d.value))
  .curve(d3.curveMonotoneX);

var lines = mainGraph
  .selectAll(".path")
  .data(data.map((i) => i.values))
  .enter()
  .append("path")
  .attr("d", lineGenerator)
  .attr("fill", "none")
  .attr("stroke-width", 3)
  .attr("stroke", (d, i) => colorScale(i));

//No.6 append circles
let circleData = data.map((i) => i.values);
mainGraph
  .selectAll(".circle-container")
  .data(circleData)
  .enter()
  .append("g")
  .attr("class", "circle-container")
  .attr("fill", (d, i) => console.log(d) || colorScale(i))
  .selectAll("circle")
  .data((d) => d)
  .enter()
  .append("circle")
  .attrs({
    cx: (d) => xScale(d.name),
    cy: (d) => yScale(d.value),
    r: 3,
    opacity: 1,
  });

.line {
  stroke: blue;
  fill: none;
}

<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

Leave a Comment Cancel Reply