-2
Я пытаюсь обновить гистограмму на основе объектов массива, и кажется, что мой бар не обновляется.Обновление диаграммы d3 не работает
могли бы вы, пожалуйста, дайте мне знать, где я буду неправильно Ниже приведен фрагмент кода folllowing
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
</style>
<body>
<h1> Monthly Trend Based on Folder</h1>
<select onchange="updateData()" id="metric">
<option >SP_Sterling</option>
<option >IWH</option>
<option >IWH_BreakFix</option>
</select>
<div id="chart">
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 760 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
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 + ")");
\t
\t // Update the bar chart
//i'm trying to Update the bar chart based on array objects and it seems that my bar is not getting refreshed
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#00a65a", "#f56954"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
function loadData() { \t
\t
var metric = document.getElementById('metric').selectedOptions[0].text;
var dataFile = metric + '.csv';
return dataFile;
};
d3.csv(loadData(), function(error, data) {
console.log("Inside load function");
if (error) throw error;
var monthvalues = d3.keys(data[0]).filter(function(key) { return key !== "Month"; });
data.forEach(function(d) {
d.monthdata = monthvalues.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.Month; }));
x1.domain(monthvalues).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.monthdata, function(d) { return d.value; }); })]);
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("Count");
\t
//enter
var bar = svg.selectAll(".bar")
.data(data);
bar.enter()
\t .append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x0(d.Month) + ",0)"; });
//update()
bar.selectAll("rect")
.data(function(d) { return d.monthdata; })
.enter()
\t .append("rect")
\t .attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return color(d.name); });
//remove()
var legend = svg.selectAll(".legend")
.data(monthvalues.slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color)
\t .append("rect");
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
loadData();
function updateData(){
console.log(loadData());
d3.csv(loadData(), function(error, data) {
if (error) throw error;
var monthvalues = d3.keys(data[0]).filter(function(key) { return key !== "Month"; });
console.log(monthvalues);
data.forEach(function (d) {
\t \t d.monthdata = monthvalues.map(function(name) { return {name: name, value: +d[name]}; });
\t \t console.log("Month Data:"+d.monthdata);
\t \t
});
\t
x0.domain(data.map(function(d) { return d.Month; }));
x1.domain(monthvalues).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.monthdata, function(d) { return d.value; }); })]);
svg.selectAll("g.y.axis")
.call(yAxis);
\t \t svg.selectAll("g.x.axis")
.call(xAxis);
var bar = svg.selectAll(".bar")
.data(data)
\t .append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x0(d.Month) + ",0)"; });
//update()
bar.selectAll("rect")
.data(data)
.enter()
\t .append("rect")
\t .attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return color(d.name); });
});
};
</script>
</body>
</html>`
data.csv Месяц, Success_Count, Failure_Count Jan, 35,5 Feb, 5,2 March, 40,2 –
У вас есть несколько проблем с кодом. Общая идея обновления сюжета с новыми данными заключается в том, чтобы просто обновлять свои домены после применения новых данных. Кроме того, если количество баров (точек данных) остается неизменным при обновлении данных, вам не нужно вызывать .enter(). Другое дело, вы должны сначала настроить свои оси, весы и т. Д., Вне функции d3.csv(). Проверьте это: https://bl.ocks.org/RandomEtc/cff3610e7dd47bef2d01 – rby