在第二次呼叫时附加不起作用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在第二次呼叫时附加不起作用相关的知识,希望对你有一定的参考价值。
我正在制作一个js函数,每次调用数据时都将数据绘制成一个新的div,问题是有些追加不适用于第二次调用,我需要你的帮助才能知道什么是错的。
<!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);
plot(data);
</script>
</body>
答案
你的函数plot()
有一个side effect
- 它改变输入数据数组。
如果你传递副本那里一切都会好的:
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>
以上是关于在第二次呼叫时附加不起作用的主要内容,如果未能解决你的问题,请参考以下文章
React setState 在第一次尝试时不起作用,但在第二次尝试时起作用?
Contact Form 7 在第一次提交时不起作用,但在第二次按下 sumbit 按钮时它工作正常