score:0
here's one possible solution. first, use a d3.csv
.row
to organize the data into an object of key: [values]
where key is your x, y and z and values is an array of val1, val2, ...
d3.csv("data.csv")
.row(function(d) {
return {
key: d.name,
values: [+d.val1, +d.val2, +d.val3, +d.val4]
};
})
.get(function(error, data) {
// draw plot
}
then your line generator is simply:
var line = d3.svg.line()
.interpolate("basis")
.x(function(d,i) { return rangex(slots[i]); })
.y(function(d,i) { return rangey(d); });
and you draw each line as:
var g = p.selectall(".linegroup")
.data(data)
.enter().append("g")
.attr("class", "linegroup");
g.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
})
.style("stroke", function(d,i) {
return color(i);
})
.attr("fill","none");
here's an example.
Source: stackoverflow.com
Related Query
- In d3js, how to plot line chart from csv file, taking data from seperate columns for each row
- How to extract data from a csv file and create a line chart from it in D3.js
- How to create a multiseries line chart using data filtered from a csv file?
- How to plot data to map from csv file in D3.js
- How to load data from a CSV file in D3 v5
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- how to display data from 1st point on words on y axis for line chart in d3.js
- How do you add multiple lines to a D3JS line chart where the depedent variable data sources start at different positions along the range?
- how to convert data selected from a postgres database to json or csv to use it with d3js lib?
- How to make a scatter plot from a CSV file using d3.js?
- How plot and symbolize only selected columns from csv in plotting in d3?
- D3.JS how to load 3 csv files and change data on line chart with button click event?
- D3js multiple line chart from json file
- how to transpose data from csv file in d3.js
- How to select only x rows from a csv file for a pie chart
- How to update data on a page according to data from a CSV file instead of using fixed element data on the page?
- Line chart function pulling out data from different columns
- how to make real time multi line chart using d3 where data is from api in json format
- How to pull information from a CSV file for use in a stacked bar chart
- How to implement tooltip for D3 line chart with data from 2 arrays?
- d3js - How to plot a multi line chart chart for multiple groups of items that can be updated?
- d3js - How to update an existing svg path in a simple d3 line chart with new data flowing through?
- D3js Multi line graph convert from using CSV file
- How to sort number columns from csv file read in using D3.js - columns read in as strings
- using variable to parse data with D3js when reading in from csv file
- D3js: how to plot multiseries line chart with json data
- How can I program a line chart using D3.js to visualise a data which is received from a server side ?
- How to plot line chart using Json File
- how to plot data from JSON object on .svg file using D3.js
- D3js take data from an array instead of a file
More Query from same tag
- exit().remove() not working in my D3.js Force Layout Graph
- Freezing force directed network graph and make draggable in D3
- D3js cartography: auto-focus on geographic area ? (svg canvas, zoom scale, coordinate translation)
- How do I use d3.js to display text in an SVG rect only if the text will fit?
- d3 - how to format xAxis ticks depending on weeks
- Adding Dots to d3 SVG Map
- Why don't I get a heatmap graph with my code?
- Including d3 graph in Angular 4 application
- Interaction with updated/entered elements
- How to update the existing nodes attributes of a d3js tree, based on an input value from a search box?
- Using an associative array as data for D3
- How do I position tooltips to follow a data point to which it is attached in D3?
- How to animate areas of a D3 area chart?
- Draw a d3 trend line with different color and width for different segments
- Simple CSV parsing in Javascript
- Getting expected attribute value in D3 transition
- D3 Collapsible force directed graph with non-tree data - link alignment
- d3 error from plotly: TypeError: e.getAttribute is not a function
- d3.js number of days between two dates
- c3 scaling similar to d3?
- d3 + adding text labels + formatting
- d3.js interferes with form element?
- How to show only specific node level in d3 tree layout
- How to get the current element height?
- D3 Donut chart projected to sphere/globe
- How can I make last node in d3 zoomable sunburst as a hyperlink?
- How to wrap only one word in axis labels
- Data structure for D3 pie charts
- D3.js Interactive Legend Toggling
- How do I use D3 with JavaScript events