score:2
Accepted answer
Couple obvious issues:
- Your X values are strings but you are using a
scaleLinear
. That's for numbers; tryscaleBand
. - With that fixed, you aren't setting your x domain properly.
Here's those two fixes:
var data = [
{
"date": "Jan",
"value": 1507
},
{
"date": "Feb",
"value": 1600
},
{
"date": "Mar",
"value": 1281
},
{
"date": "Apr",
"value": 1898
},
{
"date": "May",
"value": 1749
},
{
"date": "June",
"value": 1270
},
{
"date": "July",
"value": 1712
},
{
"date": "Aug",
"value": 1270
},
{
"date": "Sept",
"value": 1257
},
{
"date": "Oct",
"value": 1257
},
{
"date": "Nov",
"value": 1257
},
{
"date": "Dec",
"value": 1257
}
];
///////////////////////////// Create SVG
var w = 400;
var h = 250;
var margin = {
top: 20,
bottom: 20,
left: 40,
right: 20
}
var width = w - margin.left - margin.right
var height = h - margin.top - margin.bottom
var svg = d3.select("body").append("svg")
.attr("id", "svg")
.attr("width", w)
.attr("height", h)
var chart = svg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
///////////////////////////// Create Scale
var x = d3.scaleBand()
.range([0, width])
var y = d3.scaleLinear()
.rangeRound([height, 0])
///////////////////////////// Create Line
var line = d3.line()
.x(function(d) {
console.log(d.date)
console.log(x.domain())
return x(d.date)
})
.y(function(d) {
console.log(d.value)
console.log(y.domain())
return y(d.value)
})
x.domain(data.map(function(d) {
return d.date
}));
y.domain([0, d3.max(data, function(d) {
return d.value
})]);
chart.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
///////////////////////////// Create Axis
var xAxis = chart.append('g')
.classed('x-axis', true)
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
var yAxis = chart.append('g')
.classed('y-axis', true)
.call(d3.axisLeft(y))
<script src="https://d3js.org/d3.v4.min.js"></script>
Source: stackoverflow.com
Related Query
- D3 - attribute d: Expected number Error in creating curved chart
- Error: <path> attribute d: expected number - when trying to build a line chart with D3
- D3 line chart - Error: <path> attribute d: Expected number
- Error: D3 V4 Multi-series line chart with Angular-cli - <path> attribute d: Expected number
- <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…". Error while creating a line chart
- D3 Simple Line Chart: Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "[object Object]"
- D3 Persistent Path d expected number error during transition
- SVG path error: <path> attribute d: Expected number
- Drawing line in d3js results in d3.v5.min.js:2 Error: <path> attribute d: Expected number
- d3, line chart, Error: <path> attribute d: Expected number
- D3 multi-line chart line path not displaying: d attribute missing
- Line chart of D3.js won't show due to <path> attribute d: Expected number, "M0,NaNL38.695652173…"
- D3js line chart error "attribute d: Expected number, "M49,NaNZ"."
- D3.js Line Graph - Error: <path> attribute d: Expected number
- d3js line chart error - drawing weird area
- "Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…". " Error with D3
- Error in A Simple D3 Line chart with Legend and Tooltips for D3v 3.5.13
- D3 line chart, Expected number shows number and NaN
- D3.js geoPath map returning Error: <path> attribute d: Expected number
- How to add circles onto line chart path d3.js
- D3.js Error: Invalid value for <path> attribute for a line chart
- Append a line to an end of a path in area chart d3
- Error when transitioning an arc: <path> attribute d: Expected arc flag ('0' or '1')
- D3 multi-line chart - Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNC…"
- Multiple line chart append path directly
- d3 Error: <path> attribute d: Expected number date
- D3 line chart - Number against time coming straight line (No Error)
- Stumped by d3 error I'm receiving - Error: <path> attribute d: Expected number, "M0,NaNL21.923076923…"
- issue in re-rendering the path in a line chart based on user selection
- D3 line chart giving wrong values at highest number
More Query from same tag
- Brush and transition coexist
- How do I prevent clipping of an SVG drawn with the D3 library (in Javascript)?
- Why is my tooltip in a wrong position?
- How to implement High pass and low pass filtering using dygraphs?
- combining Aframe and d3.js: embed issue with different library source
- Passing json object from grails controller to a gsp rendering a d3 chart?
- How to animate elements for every swap in a array using d3.js
- Why is there a last useless bin in d3js scaleTime histogram?
- Function returns number, but object is stored
- c3js, X Axis crushed and badly formated
- Horizon chart not visible when using d3.scale.log()
- <g> attribute transform="translate(NaN,NaN)" when using Interactive Guideline
- JSON AJAX url wants more
- Update Size of D3 Charts Through Updated Variables
- What does fusion chart buy you that D3 doesn't?
- Retrieve geo-coordinates from d3-tile
- Remove black SVG fill in C3.js time-series chart
- How can I use d3-scale-chromatic functions with a domain other than [0, 1]?
- nvd3.js sunburst chart - How to edit the tooltip?
- Responsive line chart with transitions using d3
- Displaying SVG elements with D3 and d3.slider: Uncaught TypeError: Cannot read property 'length' of undefined
- Grouped bar chart data structure issue
- Strange error in chromium during development
- How to convert latitude longitude to azimuth coordinates for d3.js?
- D3 network chart with arrow head pointing towards source node
- possible to tween d3.geo.circle().angle()
- How to transition two properties with different durations?
- HTML2Canvas not rendering D3 font and font size
- Drag a rect and append to a respective group
- Confused by data binding and selecting specific data