图表显示了数据,但是当触发更新功能时,它不显示更新的条形图。
如果我使用.data(),则结果类似于第一张图片,如果将其更改为.datum(),则第二张图片中将没有像条。
我还需要知道在哪里使用d3 .data()和.datum()。
[如果可能,请更正我的代码。
提前感谢
var u= svg.selectAll("rect")
// .data(data)
.data(data.filter(function(d)
{
return d.ddata==allCourse[0]}))
// .datum(data.filter(function(d)
// {
// return d.ddata==allCourse[0]}))
// update bars
u
.enter().append("rect")
.merge(u)
// .attr("class", "bar")
// .transition()
// .duration(1000)
.attr("x", function(d) { return x(d.Item); })
.attr("y", function(d) { return y(+d.count); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(+d.count); })
.attr("fill", function(d) { return colours(d.Item); })
.append("title")
.text(function(d){
return d.Item + " : " + d.count});
svg.append("text")
.attr("class", "label")
.attr("y", height/100)
.attr("x", width/2)
.attr("text-anchor", "middle")
.text("Assignments")
svg.append("text")
.attr("transform", "rotate(-90)")
//.text("Range")
.attr("y", -29)
.attr("x", -(height/2))
.attr("text-anchor", "middle")
.text('Ratio');
//This function will update the chart
function update(selectedCourse) {
// Select new data from the dataset upon select option
var dataFilter = data.filter(function(d)
{
return d.ddata==selectedCourse})
// update bars
u
.datum(dataFilter)
.transition()
.duration(250)
.attr("class", "bar")
.attr("x", function(d) { return x(d.Item); })
.attr("y", function(d) { return y(+d.count); })
.attr("fill", function(d) { return colours(d.Item); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(+d.count); })
.text(function(d){
return d.Item + " : " + d.count});
}
代替.datum().data()为我工作。
function update(selectedGroup) {
// Select new data from the dataset upon select option
var dataFilter = data.filter(function(d)
{
return d.ddata==selectedGroup})
// update bars
svg.selectAll(".bar")
.data(dataFilter)
.transition()
.duration(250)
.attr("x", function(d) { return x(d.Item); })
.attr("y", function(d) { return y(+d.count); })
.attr("fill", function(d) { return colours(d.Item); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(+d.count); })
.text(function(d){
return d.Item + " : " + d.count});