d3.js库上的On change事件重复图表
On change event on d3.js library duplicate charts
我正试图在d3.js库的帮助下制作一个图表,我的数据来自两个来源,并且具有相同的格式(tsv),我使用一个表单来尝试根据单击的按钮更改显示的图表。事实上,我的问题是,当我更改图表选择时,标签和我的图表都会重复。
我的表格是这样的:
<form>
<label><input name="radio" type="radio" value="Incoming"/> Incoming</label>
<label><input name="radio" type="radio" value="Outgoing" checked="checked"/> Outgoing</label>
</form>
和javascript部分检索检查的无线电输入值:
draw("data.tsv");//on load load the default checked
d3.selectAll("input").on("change", change);
function change(){
var radios = document.getElementsByName('radio');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
if(radios[i].value=="Outgoing"){
draw("data.tsv");
console.log(radios[i].value);
}
else{
draw("datasecond.tsv");
console.log(radios[i].value);
}
}
}
}
谢谢你的建议!!!
编辑:绘图功能:
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function draw(data){
d3.tsv(data, function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
//data.forEach(function(d) {
// d.date = parseDate(d.date);
//});
var cities="";
cities = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, temperature: +d[name]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Number");
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
city.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
});
}
很难说没有看到draw函数的代码,但我想解释是,每次调用draw时都会创建新的axis()对象,而不是重用现有的对象。请确保保留对轴对象的引用。创建它们一次,然后在draw函数中重用这些实例。
相关文章:
- Bootstrap 3 Datepicker v4:dp.show和dp.change事件在Datepicker内联时不
- 在change事件javascript上动态添加行
- 了解'这'在jQuery on change事件中
- 为什么我的on change事件在ie9上返回空
- jQuery.change()事件未被触发
- 在on.change事件之后运行函数
- 选择使用 jQuery 接收 change() 事件的表单的提交按钮
- 使用 ng-change 对输入类型数据进行 JavaScript 取消事件
- 从服务器获取数据,并使用$http服务和ng-change在select事件上显示它
- 试图通过模块模式在DOM元素上实现change()事件
- 收听Aloha编辑器“aloha-smart-content-change”事件
- 将 on('change') 的事件侦听器添加到 Google 地图信息窗口
- 当 ng-change 事件发生时,函数不会在角度 js 中调用
- IE 的行为与 jQuery change/ajax 事件不一致
- 如何在角度 UI 开关中获得 ng-change 事件
- 使用 .change Jquery 事件更改内容
- 将当前元素发送到 ng-change 事件
- 检测复选框是否在 Angular.js ng-change 事件中处于选中状态
- 与jQuery“change()”事件的反面是什么
- Dojo 等效于事件 .change()