score:2
Accepted answer
you're using a date object in the line generator...
var line = d3.line()
.x(function(d) {
return x(new date(d.date));
})
...but not in the scale:
x.domain(d3.extent(data, function(d) {
return d.date;
}));
therefore, it should be:
x.domain(d3.extent(data, function(d) {
return new date(d.date);
}));
here is your code with that change:
var data = [{
date: "2017-01-01",
"new york": 63.4,
"san francisco": 62.7,
"austin": 72.2
}, {
date: "2017-02-01",
"new york": 58,
"san francisco": 59.9,
"austin": 67.7
}, {
date: "2017-03-01",
"new york": 53.3,
"san francisco": 59.1,
"austin": 69.4
}, {
date: "2017-04-01",
"new york": 55.7,
"san francisco": 58.8,
"austin": 68
}, {
date: "2017-05-01",
"new york": 64.2,
"san francisco": 58.7,
"austin": 72.4
}, {
date: "2017-06-01",
"new york": 58.8,
"san francisco": 57,
"austin": 77
}, {
date: "2017-07-01",
"new york": 57.9,
"san francisco": 56.7,
"austin": 82.3
}, {
date: "2017-08-01",
"new york": 61.8,
"san francisco": 56.8,
"austin": 78.9
}, {
date: "2017-09-01",
"new york": 69.3,
"san francisco": 56.7,
"austin": 68.8
}, {
date: "2017-10-01",
"new york": 71.2,
"san francisco": 60.1,
"austin": 68.7
}, {
date: "2017-11-01",
"new york": 68.7,
"san francisco": 61.1,
"austin": 70.3
}, {
date: "2017-12-01",
"new york": 61.8,
"san francisco": 61.5,
"austin": 75.3
}, ];
var columns = ["date", "new york", "san francisco", "austin"]
var svg = d3.select("svg"),
margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parsetime = d3.timeparse("%y-%m-%d");
var x = d3.scaletime().range([0, width]),
y = d3.scalelinear().range([height, 0]),
z = d3.scaleordinal(d3.schemecategory10);
var converttodate = function(mon) {
return new date(date.parse(mon + " 1, 2012"))
}
var line = d3.line()
.curve(d3.curvebasis)
.x(function(d) {
return x(new date(d.date));
})
.y(function(d) {
return y(d.temperature);
});
/* chetan*/
function make_x_axis() {
return d3.axisbottom()
.scale(x)
.ticks(12)
}
function make_y_axis() {
return d3.axisleft()
.scale(y)
.ticks(12)
}
//d3.tsv("data.tsv", type, function(error, data) {
//if (error) throw error;
var cities = columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {
date: d.date,
temperature: d[id]
};
})
};
});
x.domain(d3.extent(data, function(d) {
return new date(d.date);
}));
y.domain([
d3.min(cities, function(c) {
return d3.min(c.values, function(d) {
return d.temperature;
});
}),
d3.max(cities, function(c) {
return d3.max(c.values, function(d) {
return d.temperature;
});
})
]);
z.domain(cities.map(function(c) {
return c.id;
}));
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisbottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisleft(y))
var city = g.selectall(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
})
.style("stroke", function(d) {
return z(d.id);
})
.style("fill", "none");
/* city.append("text")
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "10px sans-serif")
.text(function(d) { return d.id; });
*/
// add grid lines
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(50," + (height + 20) + ")")
.call(make_x_axis()
.ticksize(-height, 0, 0)
.tickformat("")
)
/* svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.ticksize(-width, 0, 0)
.tickformat("")
) */
//});
function type(d, _, columns) {
d.date = parsetime(d.date);
for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
return d;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>
ps: the best practice, however, is changing the data itself:
data.foreach(function(d){
d.date = parsetime(d.date)
});
that way, you can just pass d.date
for the line generator, the scale, the attributes, whatever.
also, you should follow the javascript convention for names: instead of date
, use date
.
Source: stackoverflow.com
Related Query
- Multiple line chart not working with date format
- Adding color dynamically to a multiple line chart but it is not working in d3.js
- D3 Multi Series Line chart not working with correct xAxis values
- D3 line chart legend not working with v3 but working with v2
- line chart with mouseover tooltip is not working in d3.js
- Visualize date specific data with a line chart in browser with javascript
- d3 v4 line chart transition not working
- area chart with d3 is not rendering on jsp page but working fine with html
- d3.js date time format specifier not working as expected
- Line chart not aligned with x axis
- d3 Bar chart with a tool tip is not working
- D3 bar chart not working properly with all negative and positive values
- Time series line chart is not sync with axis
- viewbox with pixel value to make d3 chart resposive is not working properly
- d3js - my line chart is not working
- Labels on a D3 line chart not working
- D3 Multi Line Chart Not Displaying Properly With X Axis Value
- Why does my bar chart using scaleBand not line up with my tick marks?
- D3 Transition. Working with multiple lines on line graph and would like to transition smoothly between lines when button is pressed
- Fill line chart area with multiple colors
- Update chart with new data not working
- D3 Line Chart not having proper X & Y axis plotting with Labels
- Plotting line chart with date vs frequency in d3 by angular
- d3 line chart not showing,can not read in date data
- Django nvd3 Line Chart tool tip not working in case of intersection two series
- Update data on line chart not working
- How to make a d3 multiple line chart with irregular data?
- D3: Multi-Series chart not working with last version
- d3-tip not working for a line chart
- DC.js Stacked Line Chart not working
More Query from same tag
- Zoomable D3 Angular Treemap Directive
- Watching for updates nested within multiple objects passed into angular component
- Gradient smoothing in a long SVG object
- Visualize multidimensional Array in SVG
- d3.js : non linear graph axis
- How to convert d3.value() iterable and d3.rollup from javaScript into TypeScript
- troubleshooting d3.js installation 'Let's Make a Map' tutorial
- Ionic Framework Typescript: Callback function is not able to access `this` variables
- D3 Word Wrap on Zoomable Treemap
- How to parallelize d3.js or cubism.js
- What does d3.select(this) return?
- d3 realtime graph appears only after a delay
- D3 composite key function
- Specifying style of node through function
- How to programmatically add properties to topojson file at runtime?
- Wiring events for reusable d3 time slider
- Page design for a row is not coming properly
- Why does a CSS transform,translate change the rotation for rotated elements?
- dc.js: multiple dimension filters
- How to create a bar chart with C3 that doesn't group all columns in the same set
- Access class functions from d3 event handler
- How do I include a timezone in my d3 time formatted data?
- Javascript Date object returning December 31st 1969
- How to group svg elements
- Draw multiple circles using d3.js in a 3x3 format
- d3: drawing multiple rectangles using areas
- Get all the data from a clicked node in C3JS
- D3.js v4 major & minor tick lines with y-Axis zero as the centered baseline
- Fetching and processing data with semicolon delimiters and no headers
- Parse filtered data with D3