散点图未更新圈数 [英] Scatterplot is not updating the number of circles
问题描述
这就是所有代码，按照要点，您可以将其保存为HTML文件并尝试:
So here is all the code, in a gist, you can just save it as a HTML file and try it:
https://gist.github.com/babakinks/5407967
所以从一开始，我就假设散点图圈有一些默认数字，并且我完全绘制了散点图.
so look at the very beginning I am assuming some default number for scatter plot circles, and I fully draw the scatter plot
var numDataPoints = 50;
然后在底部处，我有一个侦听器，可以使用随机的新值重绘散点图，并且它可以工作..但我想对其进行改进，以便可以在文本框中输入要绘制的圆圈的数量，并且应该绘制的圆圈数量不总是与开始时的圆圈数量相同.但是，它不听我的话！是的，它确实用新的随机值重绘了圆，但是它仍然绘制了最初所具有的相同数量的圆.我不知道该如何解决这部分，对于D3.js来说我还很陌生.我期望它的工作方式是错误的?
Then at the bottom, I have this listener that redraws the scatter plot with random new values, and it works..BUT I wanted to improve it such that I can type how many circles to draw in the text box and it should draw that many circles, not always the same 50 that it began with. BUT it doesn't listen to me! Yes it does redraw the circles with new random values BUT it is still drawing the same number of circles that it had at first . I don't know how to fix this part, I am pretty new to D3.js . The way I am expecting it to work is wrong?
//On click, update with new data
d3.select("#drawbtn")
.on("click", function() {
推荐答案
您只需要添加enter()和remove()选择:
You just need to add enter() and remove() selections:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>yguyghggjkgh</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<div>
<input type="text" id="count" name="howmany">
<input type="button" id="drawbtn" value="draw">
</div>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
var padding = 30;
//Dynamic, random dataset
var dataset = []; //Initialize empty array
var numDataPoints = 50;
console.log("so we are here.")
var maxRange = Math.random() * 1000; //Max range of new values
for (var i = 0; i < numDataPoints; i++) { //Loop numDataPoints times
var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer
var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer
dataset.push([newNumber1, newNumber2]); //Add new number to array
}
//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", 2);
//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
//On click, update with new data
d3.select("#drawbtn")
.on("click", function() {
//New values for dataset
var numValues = parseInt(document.getElementById('count').value, 10);
console.log(numValues);
var maxRange = Math.random() * 1000;
dataset = []; //Initialize empty array
for (var i = 0; i < numValues; i++) { //Loop numValues times
var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer
var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer
dataset.push([newNumber1, newNumber2]); //Add new number to array
}
//Update scale domains
xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })]);
yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })]);
//Update all circles
svg.selectAll("circle")
.data(dataset)
.transition()
.duration(1000)
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
});
//Enter new circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", 2);
// Remove old
svg.selectAll("circle")
.data(dataset)
.exit()
.remove()
});
</script>
</body>
</html>
这篇关于散点图未更新圈数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
