0

I have the following data JSON structure.

var data = {
  "Accel": {
    "10%": {
      "x": [0,1,2,3,4,5,6,...],
      "y": [0.3769,0.4052,0.4354,0.4675,...]
    },
    "20%": {
      "x": [0,1,2,3,4,5,6,...],
      "y": [0.7543,0.3756,0.7556,0.2344...]
    },
    ...
    "100%": {
      "x": [0,1,2,3,4,5,6,...],
      "y": [0.7543,0.3756,0.7556,0.2344...]
    }
  }
}

I want to draw that 10 curves / polylines in the same axes with D3.js using the alphanumeric intermediate key (XX%) to label each curve on the plot. My best try so far:

// Margin, scales and axes
var margin = {top: 20, right: 50, bottom: 50, left: 20}, width = 1200, height = 800;
var xScale = d3.scaleLinear().domain([0,60]).range([0, width - margin.left - margin.right]).nice();
var yScale = d3.scaleLinear().domain([0,30]).range([height - margin.top - margin.bottom, 0]).nice();
var xAxis = d3.axisBottom(xScale).ticks(10, "s");
var yAxis = d3.axisRight(yScale).ticks(10, ".3");

// SVG
var svg = d3.select(".graph").append("svg")
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr('viewBox','0 0 ' + width + ' ' + height);

// X axis
svg.append("g")
    .attr("class", "x-axis")
    .attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")")
    .call(xAxis);

// Y axis
svg.append("g")
    .attr("class", "y-axis")
    .attr("transform", "translate(" + (width - margin.right) + "," + margin.top + ")")
    .call(yAxis);

// Line definition
var TbhLine = d3.line()
    .x(d => xScale(d.x))
    .y(d => yScale(d.y));

// Lines plotting
var TbhPaths = svg.append("g")
    .selectAll("path")
    .data(data["Accel"])
    .enter()
    .append('path')
    .attr("fill", "none")
    .attr("stroke-width", 1.5)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .attr("d", d => TbhLine(d));

When I run it, axes, scales, domains and ranges are all fine, but no line is plotted. Any ideas on how could this be done? I am using D3 v6.

Thanks in advance.

andcl
  • 3,342
  • 7
  • 33
  • 61
  • [this example](http://jsfiddle.net/philgyford/RCgaL/) of a multi-line chart has only 2 lines, but I think it may still be useful to you. Have a look – Rachel Gallen Mar 16 '21 at 20:33
  • Thanks @RachelGallen, but not very useful for me because the json structure is not like mine. My JSON have values of x and y within one array for each of the 10 lines, and in the example, data is structured differently. Thanks anyway. – andcl Mar 16 '21 at 21:03
  • it wasn't the data I was looking at, it was the chart function I thought might be helpful. The basic principle for adding lines is the same (although more json data would be helpful to make a runnable example) – Rachel Gallen Mar 16 '21 at 21:07
  • other relevant questions re. json/d3.js.. [here](https://stackoverflow.com/questions/14308779/d3-json-multiple-line-chart) and [here](https://stackoverflow.com/questions/39717041/how-to-use-json-data-instead-of-tsv-file-in-d3-multi-line-charts) – Rachel Gallen Mar 16 '21 at 21:11

0 Answers0