我试图在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时都在创建新的axis()对象,而不是重用现有的对象。确保保留对轴对象的引用。一次创建它们,然后在draw函数中重用这些实例。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句