score:1
Accepted answer
you just have to redraw your axis and your circles on your onChange:
d3.select('#inds')
.on("change", function () {
var sect = document.getElementById("inds");
var section = sect.options[sect.selectedIndex].value;
x.domain([0, Math.floor(section)]);
d3.select(".x.axis").call(xAxis);
svg.selectAll("dot")
.data(data)
.attr("r", 5)
.attr("cx", function (d) {
return x(d.date);
})
.attr("cy", function (d) {
return y(d.close);
})
});
new answer: you are not updating your graph you are redrawing it completely change you ron change to :
d3.select('#inds').on("change", function() {
var sect = document.getElementById("inds");
var section = sect.options[sect.selectedIndex].value;
x.domain([0, Math.floor(section)]);
d3.select(".x.axis").call(xAxis);
svg.select(".line")
.attr("d", valueline(data));
// draw the scatterplot
svg.selectAll("circle")
.data(data)
.attr("r", 5)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.close);
})
});
you can take a look here for the update patern https://bl.ocks.org/mbostock/3808218
Source: stackoverflow.com
Related Query
- x axis rescale using dropdown in line chart d3
- X axis not displaying on Multi Series Line Chart using d3.js
- D3 line chart axis text labels in multi line
- NVD3 - line chart NaN on safari using latest versions
- Make simple bar chart using C3 with separate columns on the x axis
- nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
- NVD3 Line Chart X Axis Ticks Are Missing
- Line chart using ordinal x-axis with d3.js and nvd3.js
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- NVD3 line chart display X axis
- How to create Stacked Line Chart D3, Multiple Y Axis and common X Axis
- X axis not displaying on bar chart using d3.js
- Dual Y axis line chart in dc.js
- d3 tooltip position issue in line chart using javascript
- D3js - Getting a line chart drawn, from "JSON data" input using d3.json
- How to line up x axis on stacked bar chart with a line overlay in d3.js
- How to change color of line in line chart using dimple.js?
- d3 bar chart with fixed bar width and fixed spacing to align in center axis line
- Line chart not aligned with x axis
- C3.js change label position of Line Chart Y axis to center up of Y axis
- NVD3 Line Chart doesn't display when data passed using ajax - data.map is not a function
- How to create a % difference arrow line with value in a bar chart using D3.js
- how to make the x axis scrollable in a d3 line chart graph
- Formatting nvd3 line chart axis
- Time series line chart is not sync with axis
- How to place Circles(dots) in line chart using "d3.js " library?
- how to display data from 1st point on words on y axis for line chart in d3.js
- d3 line chart using a sorted data set
- Responsive line chart with transitions using d3
- D3 chart Y axis line is not visible in some resolutions
More Query from same tag
- Change xlink:href link of svg image when image does not exits in D3js?
- style transitions don't seem to work when called from a setInterval function (D3.js)
- D3 js legend for a dynamic dataset
- Javascript/D3.JS - Convert CSV Columns items to JS List
- d3.js - table partially visible when insert to group element
- Dynamically Add/Remove Lines in d3 (v4) Line Chart
- Titles not showing on links or nodes using JS D3.js Version 3
- Add a SVG object on a timescale axis in D3?
- Modify log y-axis scale in dc.js
- D3.js Version 4. Basic rendering of circle
- ReactJs and D3.js : Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at responseJson
- Difference between dynamic rectangles and circles in d3?
- sdn4.0 set resultDataContents graph
- NetworkD3 Sankey Plot in R: How to switch text labels from the right to the left of the inner nodes only
- D3 - How to update hidden branches in tree layout
- How can I add different images instead of text inside d3.js piechart slices
- How can I set max value(range) for y-axis and bar width of a bar chart using nvd3.js
- d3.js javascript crazy clientHeight property
- How can I get only elements with odd ids from a D3 selection?
- Correct Way to Import D3.js into an Angular 2 Application
- d3 v5 plotting simple line chart and mapping/casting to numbers using promise
- Same repeatable string values using a band scale
- D3 Bar and Linear Chart With Multiple Axis
- d3 mulitple area chart converstion to line charts
- How to control node labels in Sankey diagram
- d3.v3.min.js:1 Error: <svg> attribute height: Expected length, "NaN" while loading a d3 chart in a modal popup
- D3 drag + links not moving
- jsdom svg transform transitions - Cannot read property 'baseVal' of undefined
- D3 - Can't get popover to appear at cursor xy coordinate
- Display dynamic frequencies on axis