score:1
Accepted answer
Your function plot()
has a side effect
- its changing input data array.
If you pass copies there everything will be fine:
plot(data.map(a => Object.assign({}, a)));
plot(data.map(a => Object.assign({}, a)));
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = [];
data.push({
date: " 2019-03-25 00:00:00 ",
value: 509
});
data.push({
date: " 2019-03-26 00:00:00 ",
value: 505
});
data.push({
date: " 2019-03-27 00:00:00 ",
value: 504
});
data.push({
date: " 2019-03-28 00:00:00 ",
value: 517
});
data.push({
date: " 2019-03-29 00:00:00 ",
value: 376
});
data.push({
date: " 2019-03-30 00:00:00 ",
value: 474
});
data.push({
date: " 2019-03-31 00:00:00 ",
value: 504
});
data.push({
date: " 2019-04-01 00:00:00 ",
value: 510
});
data.push({
date: " 2019-04-02 00:00:00 ",
value: 507
});
data.push({
date: " 2019-04-03 00:00:00 ",
value: 516
});
data.push({
date: " 2019-04-04 00:00:00 ",
value: 529
});
data.push({
date: " 2019-04-05 00:00:00 ",
value: 380
});
data.push({
date: " 2019-04-06 00:00:00 ",
value: 455
});
data.push({
date: " 2019-04-07 00:00:00 ",
value: 513
});
function plot(arg) {
var ddd = arg;
var margin = {
top: 20,
right: 20,
bottom: 70,
left: 40
};
var width = 600 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format(" %Y-%m-%d %H:%M:%S ").parse;
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format("%d/%m"));
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(7);
var div = d3.select("body").append("div");
var svg = div.append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom);
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
ddd.forEach(function(d) {
d.date = parseDate(d.date);
d.value = +d.value;
});
x.domain(ddd.map(function(d) {
return d.date;
}));
y.domain([0, d3.max(ddd, function(d) {
return d.value;
})]);
g.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis).selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", "-.55em").attr("transform", "rotate(-90)");
g.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(0)").attr("y", -13).attr("dy", ".71em").style("text-anchor", "end").text("Count");
g.selectAll("bar").data(ddd).enter().append("rect").style("fill", "steelblue").attr("x", function(d) {
return x(d.date);
}).attr("width", x.rangeBand()).attr("y", function(d) {
return y(d.value);
}).attr("height", function(d) {
return height - y(d.value);
});;
}
plot(data.map(a => Object.assign({}, a)));
plot(data.map(a => Object.assign({}, a)));
</script>
</body>
UPD: After inspecting your code once more i've figure out that you can simply extract this code:
var parseDate = d3.time.format(" %Y-%m-%d %H:%M:%S ").parse;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value = +d.value;
});
from plot
function and place it before calling plot
function, here is working solution:
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = [];
data.push({
date: " 2019-03-25 00:00:00 ",
value: 509
});
data.push({
date: " 2019-03-26 00:00:00 ",
value: 505
});
data.push({
date: " 2019-03-27 00:00:00 ",
value: 504
});
data.push({
date: " 2019-03-28 00:00:00 ",
value: 517
});
data.push({
date: " 2019-03-29 00:00:00 ",
value: 376
});
data.push({
date: " 2019-03-30 00:00:00 ",
value: 474
});
data.push({
date: " 2019-03-31 00:00:00 ",
value: 504
});
data.push({
date: " 2019-04-01 00:00:00 ",
value: 510
});
data.push({
date: " 2019-04-02 00:00:00 ",
value: 507
});
data.push({
date: " 2019-04-03 00:00:00 ",
value: 516
});
data.push({
date: " 2019-04-04 00:00:00 ",
value: 529
});
data.push({
date: " 2019-04-05 00:00:00 ",
value: 380
});
data.push({
date: " 2019-04-06 00:00:00 ",
value: 455
});
data.push({
date: " 2019-04-07 00:00:00 ",
value: 513
});
function plot(arg) {
var ddd = arg;
var margin = {
top: 20,
right: 20,
bottom: 70,
left: 40
};
var width = 600 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format("%d/%m"));
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(7);
var div = d3.select("body").append("div");
var svg = div.append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom);
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(ddd.map(function(d) {
return d.date;
}));
y.domain([0, d3.max(ddd, function(d) {
return d.value;
})]);
g.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis).selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", "-.55em").attr("transform", "rotate(-90)");
g.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(0)").attr("y", -13).attr("dy", ".71em").style("text-anchor", "end").text("Count");
g.selectAll("bar").data(ddd).enter().append("rect").style("fill", "steelblue").attr("x", function(d) {
return x(d.date);
}).attr("width", x.rangeBand()).attr("y", function(d) {
return y(d.value);
}).attr("height", function(d) {
return height - y(d.value);
});;
}
var parseDate = d3.time.format(" %Y-%m-%d %H:%M:%S ").parse;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value = +d.value;
});
plot(data);
plot(data);
</script>
</body>
Source: stackoverflow.com
Related Query
- append not working when called for the second time
- d3.select("#element") not working when code above the html element
- Ajax not working when get data based on input for D3
- d3.js Stacked Bar Chart working for one dataset but not the other
- Is there a javascript command for 'only run when the mouse is over but stop when its not over'
- d3 functions not working in node.js when rendering charts from the server side
- How to start D3 JS Tree to render in Collapsible Mode when loaded for the first time
- Overflow not working when at end of the div
- D3 Zooming and Pan not working for entire map, just the projection
- d3.js: Is a time scale appropriate for the x-axis when only wanting to compare HH:MM?
- d3 click event do not working after clone element append for drag event
- D3js sunburst chart MouseOver/ MouseLeave functionality not working 100 percent of the time
- Angular2 component not called when I do d3JS append
- Why is my d3.tool tip not working for the two of the lines?
- Title Attribute not working for an SVG Rect on Safari
- d3.js transition() not working when browser is minimised
- d3 transition for transform translate not working for DIV
- D3 function to parse the date not working
- Where can I get the .geojson file for India and not separate files for each state/territory or any other distinction?
- d3 basic append example not working
- d3 zoom and brush working at the same time
- d3.event not working when combining modules
- How to modify axis labels in d3 for a stacked bar chart when the axis labels are mapped as part of the scale's domain
- Tooltip does not appear for the overlapped circles in d3.js
- Collision detection for nodes of varying sizes not working as expected
- bisectLeft function does not work if the second parameter is numerical
- Rickshaw : data for multiple series not working
- CSS transform-origin not working for svg in safari
- The mouseover event for D3.js does not work in Leaflet
- D3js code when called twice duplicates the graph instead of refreshing
More Query from same tag
- d3 force layout as line (y coordinate stays the same)
- Single horizontal stacked bar
- D3 JS separation of code
- Uncaught TypeError: n.getMonth is not a function in d3 bar chart
- Drag behavior for nested g elements
- d3.js: how to join data from more sources
- Callbacks with D3
- How can I bring a circle to the front with d3?
- d3.js - circle pack layout with nested g nodes
- Pre-projected geometry v getting the browser to do it (aka efficiency v flexibility)
- Drawing multiple circles with text in them using d3.js
- I want to increase the width of the breadcrumbs of polygon on sequence sunburst chart on d3js
- Refresh function not being called properly d3
- D3 - how to fire an on-click function for only a specific group of nodes
- How to add charts to a React.js app without using a totally different coding style?
- Follow up: drawing-sequence-logos-in-d3 using images
- Download d3 charts on click in sapui5
- d3 Bar Chart Add Margins
- D3.js Pie chart tween in ES6 - Uncaught TypeError
- Pie Chart Labels with D3.js and AngularJS
- Multiple paths with d3.js and google maps API
- How to Remove duplicate Arrays (by id) while Grouping?
- How to create scatter plot one after another removing previous in d3js?
- How to play audio on mouseover?
- Network diagram
- Programmatically triggering a D3 brush event
- d3 add text in heatmap boxes
- Creating world choropleth map with D3
- How can we create an onclick event for a d3 data map?
- geoChoroplethChart map with different fill opacity for the selected item