Javascript 如何使用html表单中的数据重新绘制我的d3.js图表?
我写了一个小网页,创建了一个24小时内警报分布图,警报计数是一个变量,它决定了在这段时间内将发送多少警报 之后,我编写了一个小表单,在输入字段中包含alarm count变量Javascript 如何使用html表单中的数据重新绘制我的d3.js图表?,javascript,jquery,html,d3.js,redraw,Javascript,Jquery,Html,D3.js,Redraw,我写了一个小网页,创建了一个24小时内警报分布图,警报计数是一个变量,它决定了在这段时间内将发送多少警报 之后,我编写了一个小表单,在输入字段中包含alarm count变量 现在,我希望能够在不重新加载页面的情况下重新绘制d3.js图形,使用表单/输入字段记录用户提交的报警计数 JsFiddle: 代码: <script type="text/javascript"> $(function(){ ........ function createDataForD3( alarm
现在,我希望能够在不重新加载页面的情况下重新绘制d3.js
图形,使用表单/输入字段记录用户提交的报警计数
JsFiddle:
代码:
<script type="text/javascript">
$(function(){
........
function createDataForD3( alarm_cnt, array) {
var data = [];
for(var i = 0, n=array.length; i< n; i++)
{
data.push({ "hour": i,
"alarms": getRatioForHour(i, array) * alarm_cnt
});
}
return data;
}
var schedule = [1, 1, 1, 1, 4, 1, 1, 3, 2, 3, 4, 1, 1, 1, 1, 1, 6, 1, 1, 1, 1, 1, 1, 1];
var alarm_count = 1000;
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 0.85 * document.width - margin.left - margin.right,
height = 0.9 * document.height - margin.top - margin.bottom;
var x_extent = [-0.5, 23.5];
var y_extent = [0, Math.round(
getMaxAlarmCountForHourInArray(alarm_count, schedule)[1] * 1.2 ) ];
var x_scale = d3.scale.linear()
.range([0, width])
.domain(x_extent);
var y_scale = d3.scale.linear()
.range([ height, 0])
.domain(y_extent);
var data = createDataForD3( alarm_count , schedule);
var xAxis = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
.ticks(24);
var yAxis = d3.svg.axis()
.scale(y_scale)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x_scale(d.hour) ; })
.y(function(d) { return y_scale( Math.round( d.alarms)) ; });
var svg = d3.select("body")
.append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("y", margin.bottom)
.attr("x", (width) / 2)
.text("Hour");
svg.append("g")
.classed("x grid ", true)
.attr("transform", "translate(0,"+height+")")
.call(xAxis
.tickSize(-height,0,0)
.tickFormat("")
);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 8)
.attr("x", -20)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Alarms per hour");
svg.append("g")
.classed("y grid", true)
.call(yAxis
.tickSize(-width,0,0)
.tickFormat("")
)
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
svg.append("g")
.selectAll("circle")
.data(data)
.enter()
.append("circle");
d3.selectAll("circle")
.attr("cx", function(d){ return x_scale(d.hour); })
.attr("cy", function(d){ return y_scale(d.alarms); })
.attr("r", 6);
$("#alarm_count_input").val(alarm_count);
});
</script>
<form id="form1" role="form" onSubmit="return false;">
<div class=form-group">
<label for="alarm_count_input" >Alarm count</label><br>
<input id="alarm_count_input" class="form-control" type="number" placeholder="Alarm count" min="0" max="999999" step="1" />
</div>
</form>
</body>
$(函数(){
........
函数createDataForD3(报警,阵列){
var数据=[];
for(var i=0,n=array.length;i
function render(){
yAxis = yAxis.tickFormat(d3.format(","));
y_extent = [0, Math.round(
getMaxAlarmCountForHourInArray(alarm_count, schedule)[1] * 1.2 ) ];
y_scale.domain(y_extent);
var data = createDataForD3( alarm_count , schedule);
svg.select("g.y.axis").call(yAxis);
gridAxis.tickFormat("");
svg.select("g.y.grid").call(gridAxis);
var lineData = svg.selectAll(".line").data([data]);
lineData.enter().append("path")
.attr("d", line(data))
.attr("class", "line");
lineData.exit().remove();
var svgData = svg.selectAll("circle")
.data(data);
var svgEnter = svgData.enter().append("circle")
.attr("cx", function(d){ return x_scale(d.hour); })
.attr("cy", function(d){ return y_scale(d.alarms); })
.attr("r", 6);
svgData.exit().remove();
}
render();
,是一个带有更新代码的JSFIDLE。我将依赖于报警计数的代码的所有部分移动到一个单独的函数中,该函数在每次报警计数值更改时都会被调用
function render(){
yAxis = yAxis.tickFormat(d3.format(","));
y_extent = [0, Math.round(
getMaxAlarmCountForHourInArray(alarm_count, schedule)[1] * 1.2 ) ];
y_scale.domain(y_extent);
var data = createDataForD3( alarm_count , schedule);
svg.select("g.y.axis").call(yAxis);
gridAxis.tickFormat("");
svg.select("g.y.grid").call(gridAxis);
var lineData = svg.selectAll(".line").data([data]);
lineData.enter().append("path")
.attr("d", line(data))
.attr("class", "line");
lineData.exit().remove();
var svgData = svg.selectAll("circle")
.data(data);
var svgEnter = svgData.enter().append("circle")
.attr("cx", function(d){ return x_scale(d.hour); })
.attr("cy", function(d){ return y_scale(d.alarms); })
.attr("r", 6);
svgData.exit().remove();
}
render();
我也在发布我的解决方案(有人可能会发现它很有用)。我已经做了类似于约格什的方法,但我明确地删除并再次添加元素(不知道这是否是正确的方法-也许有人会向我指出一些错误)
我也在发布我的解决方案(有人可能会发现它很有用)。我已经做了类似于约格什的方法,但我明确地删除并再次添加元素(不知道这是否是正确的方法-也许有人会向我指出一些错误)
JSFIDLE就好了。:)@约格什:我已经加了:)一个JSFIDLE就好了。:)@瑜伽士:我加了:)好的,非常感谢。虽然你提供的小提琴没有按你所希望的那样工作。你也可以看看我的解决方案。你能解释一下你的代码吗?尤其是var lineData=…
之后的行?@Patryk:你能解释一下为什么我的解决方案没有按预期工作吗?什么不起作用?我正在选择当前行,然后根据数据更新它。你可以在D3.js维基百科上阅读更多关于enter()和exit()的信息。当我启动你的小提琴时,刻度是恒定的(从0.1到1.0),报警计数变化时没有任何变化(并按enter键)。看看这个小提琴:。我认为这是一个比你的更好的解决方案。基本上和我上面做的一样。我只是忘记了在调整后更新yAxis值。我是用这把新小提琴做的。而不是移除旧元素并绘制新元素。它将只是移动和调整现有的元素。请更新答案,因为它仍然包含旧小提琴的链接。好的,非常感谢。虽然你提供的小提琴没有按你所希望的那样工作。你也可以看看我的解决方案。你能解释一下你的代码吗?尤其是var lineData=…
之后的行?@Patryk:你能解释一下为什么我的解决方案没有按预期工作吗?什么不起作用?我正在选择当前行,然后根据数据更新它。你可以在D3.js维基百科上阅读更多关于enter()和exit()的信息。当我启动你的小提琴时,刻度是恒定的(从0.1到1.0),报警计数变化时没有任何变化(并按enter键)。看看这个小提琴:。我认为这是一个比你的更好的解决方案。本质上是山姆