score:0
the problem here is that you are using an ordinal scale for the x axis:
var x = d3.scale.ordinal()
.domain(d3.range(data.length))
which has this domain:
[0, 1, 2, 3, 4, 5, 6, 7]
however, you're passing the datum to the line generator:
var line = d3.svg.line()
.x(function(d) { return x(d);})
//datum here -------------^
instead of that, pass the index of the datum:
var line = d3.svg.line()
.x(function(d, i) { return x(i);})
//index here ----------------^
here is your updated code:
var data = [-0.1, -0.5, -0.32, 0.2, 1, 0.5, -0.3, -1.0];
var margin = {
top: 30,
right: 10,
bottom: 10,
left: 30
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var y0 = math.max(math.abs(d3.min(data)), math.abs(d3.max(data)));
var y = d3.scale.linear()
.domain([-y0, y0])
.range([height, 0])
.nice();
var x = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeroundbands([0, width], .2);
var yaxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var line = d3.svg.line()
.x(function(d, i) {
return x(i);
})
.y(function(d) {
return y(d);
});
var datasum = d3.sum(data, function(d) {
return d;
});
svg.append("g")
.attr("class", "x axis")
.call(yaxis);
svg.append("g")
.attr("class", "y axis")
.append("line")
.attr("y1", y(0))
.attr("y2", y(0))
.attr("x1", 0)
.attr("x2", width);
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", line);
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispedges;
}
.line{
fill: none;
stroke: blue;
stroke-width: 2px;
}
.tick text{
font-size: 12px;
}
.tick line{
opacity: 0.2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
ps: you don't need that awkward line in the middle of the chart. you can create a proper axis:
var data = [-0.1, -0.5, -0.32, 0.2, 1, 0.5, -0.3, -1.0];
var margin = {
top: 30,
right: 10,
bottom: 10,
left: 30
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var y0 = math.max(math.abs(d3.min(data)), math.abs(d3.max(data)));
var y = d3.scale.linear()
.domain([-y0, y0])
.range([height, 0])
.nice();
var x = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeroundbands([0, width], .2);
var yaxis = d3.svg.axis()
.scale(y)
.orient("left");
var xaxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var line = d3.svg.line()
.x(function(d, i) {
return x(i);
})
.y(function(d) {
return y(d);
});
var datasum = d3.sum(data, function(d) {
return d;
});
svg.append("g")
.attr("class", "x axis")
.call(yaxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0," + y(0) + ")")
.call(xaxis)
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", line);
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispedges;
}
.line {
fill: none;
stroke: blue;
stroke-width: 2px;
}
.tick text {
font-size: 12px;
}
.tick line {
opacity: 0.2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Source: stackoverflow.com
Related Query
- Draw Line chart with positive & negative values
- Special donut chart with different rings/arcs for positive and negative values
- d3.js stacked bar chart with positive and negative values
- D3 bar chart not working properly with all negative and positive values
- D3.js line chart with negative values
- D3 - Chart with positive and negative values
- Bar chart with negative values
- nvd3 line chart with string values on x-axis
- nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
- d3.js histogram with positive and negative values
- Draw D3 Simple Line chart With an Array
- How can I plot positive and negative values for both axes in a scatter plot with d3?
- Using d3.js is there a way to zero align two Y Axes with positive and negative values
- Build D3js Area Chart with negative values
- Make a chart with area charts having both positive and negative y axis in dc or d3.js
- d3.js line chart with negative numbers
- Align lines and dots with x-axis values in line chart
- d3.js v4 bar chart with negative values on y axis
- D3 : non continuous line chart with null values inside an object
- Transitioning a bar chart with negative values for the width
- Simple D3.js line chart with data that are values collect every hours
- D3 v4 bar chart X axis with negative values
- Avoid negative axes values for dc powered d3 bubble chart with crossfilter
- d3.js How to draw line chart with vertical x axis labels
- D3 Multi Series Line chart not working with correct xAxis values
- dc.js row chart with negative values doesn't show full rows
- Show values on Y Axis as it is with Higher and lower limits NVD3 Line Chart
- D3js - Line Chart with binary values
- d3.js horizontal bar graph with positive and negative values - move y axis labels to far left side of graph
- Plotting trend line with actual values in d3 line chart with angular
More Query from same tag
- Getting query string at end of URL and using it to fetch data
- d3.js parse JSON-like data from file
- D3 append issue. What is wrong with this code?
- legend not visible in d3.js pie chart
- How to draw the triangle symbol?
- How to force the gravity of bubbles in D3.js
- getting the centroid co-ordinates in d3
- How to filter D3 data
- Cannot use @types/d3-tip: Argument of type 'Tooltip' is not assignable
- dc.js, fill table with data from object dynamically
- Class diagram - optimal node positioning
- How would I create my own color scale based on the id of my data in d3?
- plotting data to a line graph using 2 data sets
- d3.drag(): initialize a variable on "start" and use it on "drag" and "end"
- Line chart/graph with an irregular threshold field
- D3.js Enter/update/exit not adding elements as expected
- D3.js histogram bin size increments
- Data binding in D3 fails when using "cloned" data
- d3.js: get tick values outside extent of input domain
- Memory leak from repeatedly applying d3 transition
- Responsive Area Chart
- point in polygon using leaflet-pip and d3.geoContains
- How to view axis label and values in d3 js bar chart?
- How to append text in d3 force layout?
- Extending Bokeh to match D3.js
- getting rid of <canvas> to display polygons on top of image with .tif extension
- d3.js multi y-axis line chart
- How do you remove the background gridlines in nvd3.js?
- Append text based on g's id to a selection of gs: Cannot read property 'attr' of undefined
- Remove line from line graph in d3.js